Старый знакомый — 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 считаю полезным во многих проектах, особенно с учетом его кроссбраузерности.

CSS transform: scale или как отразить элемент по горизонтали/вертикали

Для кроссбраузерного отражения элемента совсем необязательно прибегать к помощи jS:

.flip-horizontal{
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
filter: FlipH;
-ms-filter: "FlipH";
}

Для отражения по вертикали соответственно:

.flip-vertical{
-moz-transform: scale(1,-1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
transform: scale(1, -1);
filter: FlipV;
-ms-filter: "FlipV";
}

Об эмуляции свойства css-transform в IE и других трансформациях, читайте в статье CSS transform кроссбраузерно.