Встретил недавно интересную CSS задачу по переносу строк - надо было отобразить ссылку в две строки таким образом:
Фишка в том, что при переносе строки padding в этом переносе не сохраняется и краснота заканчивается там где заканчивается последняя буква,
а блочной ссылку не сделаешь, т.к. всё превратится в красный прямоугольник.
Решение предлагалось только для padding слева, с помощью вложенности:
<h2><a>...</a></h2>
При этом нужный левый внутренний отступ ставим h2 и остаётся решить проблему только с правым.
Решение пришло в двух вариантах в мою голову:
первый - выделить все слова из предложения и обрамить их тегом <span>, а ему соответственно выставить скажем float:left и нужный padding справа
второй - использовать <a> с вложенным одним <span> и заменить все пробелы на сочетание ​ - где первый символ - пробел, а второй - один из символов
мягкого переноса (кстати, для IE6 пользуйте вместо него тег <wbr>), и в конце добавить пробел - (кроме того надо выставить определённый line-height)
Чистого, CSS-ного решения я не нашел, но понял, что более правильно использовать второй способ:
<style>
a {
border-left:4px solid red;
color:white;
float:left;
font-size:14px;
padding:3px 0;
line-height:22px;
}
a span {
background:red;
cursor:pointer;
text-decoration:none;
padding:6px 0;
}
</style>
<div style="width:200px;">
<a>
<span>
В ​париже ​запретили ​
рекламу ​фильма ​о ​
Коко ​Шанель
</span>
</a>
</div>
И результат в виде HTML со стилями (смотрите сорцы):