Старый знакомый — CSS word-wrap: break-word и вертикальный текст

Свойство css word-wrap указывает, переносить ли длинное слово, если оно не вмещается по ширине в заданную область.
Поддерживается в браузерах IE6+, Opera 10.5+, Firefox 3.6+, Chrome, Safari.
Пример использования:

<style type="text/css">
.narrow-column{
width:200px;
font-size:1.5em;
word-wrap:break-word;
}
</style>
<div class="narrow-column">
съешь еще этих мягких
тысячавосемьсотвосьмидесятидевятимиллиметровых булок,
да выпей чаю.
</div>

Указание word-wrap: break-word весьма полезно, когда нужно быть уверенным, что текст в блоке никоим образом не выйдет за его пределы, и при этом может быть прочитан полностью.

Примечание:
Правила переноса в русском языке это свойство не соблюдает и, зачастую, разбивает слова некорректно.

Вертикальный текст с помощью word-wrap:break-word

На мой взгляд, это очень простой способ для создания эффекта вертикального текста

К примеру

<style type="text/css">
.vertical-text{
width:1em; /*шириной в одну букву*/
word-wrap:break-word;
letter-spacing:.3ex /*У Оперы свое мнение. Фикс.*/
}
</style>
<div class="vertical-text">
What is the matrix?
</div>

Таким образом, использование свойства css word-wrap считаю полезным во многих проектах, особенно с учетом его кроссбраузерности.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *