вопрос
Как сделать что-бы текст который идет в блоке, после окончания прерывался на последнем слове которое помещаеться, а не переносился на другую строку.
и в конце к примеру поставить троеточие
пример
и в конце к примеру поставить троеточие
пример
Valve создали новый компьютер
для игры в half life - как есть
Valve создали новый компьютер... - как надо
Писал наш эксперт 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)
Пример:
Пояснения:
White-space необходим, чтобы исключить перенос строк, без overflow свойство text-overflow срабатывать не будет.
Также неободимо помнить, что текст будет переноситься, если вставить тег
Иногда попадаются макеты, в которых необходимо сделать несколько блоков одинакового размера и количество текста в них должно быть примерно одинаковым. Как правило, это реализуется на 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 срабатывать не будет.
Также неободимо помнить, что текст будет переноситься, если вставить тег
