RainMEN
@RainMEN
HTML/STYLUS/JADE/JS/Laravel/Joomla/DLE и т.д.

Сокращение имени файла в аттаче при уменьшении размера окна?

Приветствую Хабралюди!

В общем снова Я, к Вам с большим поклоном, и с каверзным вопросом =)

Суть вопроса такова: Есть картинка

Как видим это прикрепленные документы к письму, нужно как то сделать так чтобы при уменьшении размера окна если имя файла длинное, резать его, ставить многоточие, оставлять расширение файла и естественно кнопку скачать и размер файла.

Пытался использовать
    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, что бы не плодить кучу элементарных вопросов. В дальнейшем возможна работа над совместными проектами, так что если Вам не лень, вы уверены в своих знаниях, и Ваше самолюбие позволяет давать бесплатно советы то пишите через что Вам удобнее общаться.
  • Вопрос задан
  • 4030 просмотров
Пригласить эксперта
Ответы на вопрос 4
Cyapa
@Cyapa
Ни какого JS тут не нужно. Вообще, обычно такие вопросы решают на стороне сервера, но если уж нужно обойтись связкой HTML + CSS, то я предложу следующее: так как размер своего блока вы знаете, то нужно указать в процентах максимальный размер класса «name-file-attach-work» и добавить ему display: inline-block. Этого будет достаточно. Стоит только взять запас на четырехзначные расширения. картинку и трехзначные размеры (ведь вы приводите 1020 Мб, к ~1 Гб?). http://jsfiddle.net/9Anbz/1/
Ответ написан
truekenny
@truekenny
Dolios
@Dolios
" Но как оказалось это чудо работает только с блочными элементами, но тогда получаем элементы не в строку а в столбик. "

float:left?
Ответ написан
@mayorovp
display: inline-block?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
04 мар. 2021, в 22:39
2500 руб./за проект
04 мар. 2021, в 22:15
10000 руб./за проект
04 мар. 2021, в 21:50
20000 руб./за проект