Не нравятся результаты поиска? Попробуйте другой поиск!

Конец строки


     04.10.2013    Стили (CSS), Ламерские вопросы    1530

вопрос
Как сделать что-бы текст который идет в блоке, после окончания прерывался на последнем слове которое помещаеться, а не переносился на другую строку.
и в конце к примеру поставить троеточие
пример
Valve создали новый компьютер
для игры в half life - как есть

Valve создали новый компьютер... - как надо

Ответил: dj-avtosh


Писал наш эксперт Nagibaka:


Иногда попадаются макеты, в которых необходимо сделать несколько блоков одинакового размера и количество текста в них должно быть примерно одинаковым. Как правило, это реализуется на php, текст обрезается до определнного количества символов и добавляется многоточие в конце. При помощи CSS и нестандартного свойства text-overflow можно добиться такого же результата.
Хочу заметить, что свойства text-overflow нет в спецификации, оно есть только в черновиках CSS3. Но что удивительно, его поддерживает большинство браузеров, в том числе Internet Explorer 6.0+, также оно будет работать в FF 7.0+, Chrome 1.0+, Safari 1.3+, Android, IOS ну и в Opera 9.0+(правда для оперы от 9 до 11 версии придется использовать -o-text-overflow)
Пример:
.test{
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;            
            white-space: nowrap;
            overflow: hidden;
            width: 50%;          
        }

Пояснения:
White-space необходим, чтобы исключить перенос строк, без overflow свойство text-overflow срабатывать не будет.
Также неободимо помнить, что текст будет переноситься, если вставить тег

Комментарии пользователей (1)

grallast
4

31 | 8

grallast - 4 октября 2013 23:54 - Юзер

Если это заголовок, то {title limit="50"}, если краткая новость, то {short-story limit="50"}, где "50" - это количество символов.

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы