Как известно — FireFox последний из браузеров, который не поддерживает мягкий перенос (shy). Explorer, как один из продвинутых браузеров (не надо смеяться, я не шучу), начал его поддерживать самым первым. Мягким переносом верстальщик может указать где в длинном слове, при необходимости, можно сделать перенос, например, если слово не умещается в колонку. Я прочитал несколько статей на эту тему, но нигде эту задачу решить не смогли. Между тем, в FireFox действует нестандартный тег WBR, который позвляет добиться того же самого, но без символа переноса. Что не совсем то. Кстати, CSS применить к WBR нельзя. Как же быть?

Проблему я решил, но, увы, с потерями: придётся подбирать один параметр для каждого вида шрифта, слово разорванно тегом и поисковые машины проиндексируют его по частям, а полный (совместимый с Opera, FF и IE6) вариант довольно громоздок.

Во-первых, я сразу отказался от тега WBR, потому что любой HTML-валидатор укажет на то, что тег нестандартный. В FireFox действует Zero-width space, символ с кодом 8203, «пробел нулевой ширины». Он позволяет добиться того же самого — разорвать слово в определённом месте.

С идеей как это всё реализовать, я определился сразу — строка при переносе должна открывать концевой символ. А, если переноса нет, вставать поверх него. Вдоволь помучавшись с перекрытием через «position: absolute», и селектором «:after», я вдруг вспомнил о теге «Q», где можно указать текст перед и после этого тега (вообще-то указываются там открывающая и закрывающая кавычка, но сути-то это не меняет). Стало значительно проще. Для того, чтобы один символ затёр другой без остатка, я применяю «background: inherit» — наследуя фон из тегов выше.

Итак, один из минусов — это размер символа переноса в вашем экранном шрифте. Задаётся он в стиле (см. ниже) в параметре «margin-right» и для выбранной мной Tahoma равен 0.36em. Полный пример, работающий в FireFox таков (я выбрал «заброшенный» тег «VAR», чтобы реализовать задуманное):

<!-- Soft hyphen emulation in FireFox -->
<style type="text/css">
    body { background: white }
    var>q { quotes: "" "-"; margin-right: -0.36em }
    var { font-style: normal; background: inherit }
</style>

<var><q>оченьдлинноеслово&#8203;<var>продолжениеоченьдлинногослова</var></var>

Стоит браузеру разорвать слово в месте, где стоит пробел нулевой ширины и из-под второй половины слова появляется символ переноса. С полным вариантом всё немного сложнее — в Opera всё будет работать и так, в IE — нет. Там масса проблем — символ не будет перекрываться фоном, даже если вынести символ переноса из «Q» в текст, но можно заставить работать «shy». Для этого придётся убрать нулевой пробел, если его оставить в IE рядом с «shy», эффект будет непредвиденным.

Поэтому мы его убираем (кстати, можно попытаться вставить его через атрибут «content» селектором «var>var:before», если текст у нас в Unicode):

<!-- Soft hyphen in FireFox, Opera, IE6 -->
<style type="text/css">
    body { background: gray; font-size: 20px; font-family: Tahoma }
    var>q { quotes: "" "-"; margin-right: -0.36em }
    var { font-style: normal; background: inherit }
    * html var b { display: none }
</style>
<var><q>оченьдлинноеслово<b>&#8203;</b>&shy;<var>продолжениеоченьдлинногослова</var></var>