Приветствую Хабралюди!
В общем снова Я, к Вам с большим поклоном, и с каверзным вопросом =)
Суть вопроса такова: Есть
картинка
Как видим это прикрепленные документы к письму, нужно как то сделать так чтобы при уменьшении размера окна если имя файла длинное, резать его, ставить многоточие, оставлять расширение файла и естественно кнопку скачать и размер файла.
Пытался использовать
white-space: nowrap; /* Запрещаем перенос строк */
overflow: hidden; /* Обрезаем все, что не помещается в область */
text-overflow: ellipsis; /* Добавляем многоточие */
Но как оказалось это чудо работает только с блочными элементами, но тогда
получаем элементы не в строку а в столбик. Как поступить, может быть есть другое решение, или всё это придется делать через JS?
HTML <div class="attach-conteiner-work border-r">
<div class="attach-work border-b f-l">
<img src="img/attach-file.png">
<a class="name-file-attach-work">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At dolores illo quis temporibus tenetur? Assumenda at dolore ducimus labore laudantium magnam magni minus, nihil numquam suscipit unde vel veniam voluptates.</a>
<a class="filetype-file-attach-work">.doc</a>
<a class="file-size-attach-work">(10Мб)</a>
<a class="dawload-file-attach-work">Скачать</a>
</div>
<div class="actions-inbox-msg-work">
</div>
</div>
CSS.attach-conteiner-work{
width: 100%;
height: auto;/*
display: table;*/
}
.attach-work{
position: relative;
width: 100%;
border-bottom: 1px solid #B8B8B8;
}
.attach-work a{
font-size: 12px;
font-family: "trebuchet ms", sans-serif;
color: #37BDE9;
font-weight: bold;
text-decoration: underline;
}
.attach-work a:hover{
color: #70CF70;
text-decoration: none;
cursor: pointer;
}.attach-work a:active{
cursor: pointer;
color: #E18322 ;
text-decoration: none;
}
.name-file-attach-work{
display: block;
text-align: justify;
color: #666666;
font-size: 12px;
font-family: "trebuchet ms", sans-serif;
font-weight: bold;
text-indent: 0;
white-space: nowrap; /* Запрещаем перенос строк */
overflow: hidden; /* Обрезаем все, что не помещается в область */
text-overflow: ellipsis; /* Добавляем многоточие */
}
ЗЫ: Не для протокола! Хотелось бы найти опытного верстальщика для внеклассного общения может через Skype или ICQ, что бы не плодить кучу элементарных вопросов. В дальнейшем возможна работа над совместными проектами, так что если Вам не лень, вы уверены в своих знаниях, и Ваше самолюбие позволяет давать бесплатно советы то пишите через что Вам удобнее общаться.
Простой
