Как добиться правильного переноса слов?

Question

[swcalc]

Здравствуйте, пытаюсь адаптировать сайт под разные устройства и размеры окна, но столкнулся с проблемой переноса слов.

Нужно, чтобы слова переносились целиком, но, если это невозможно, тогда разбивались.

В Опера и Хром работает word-break: break-word; Но в FireFox это не работает, понимаю, что такого атрибута нет в стандарте, но в выше упомянутых браузерах он поддерживается.

Как добиться такого результата? (если перенос позволяется длиной слова и шириной блока)


Вместо такого?

Answer 1

[swcalc]

Немного перебрав значения, пришел к данной конструкции

word-wrap: break-word;
word-break: normal; /* для Opera и FireFox */
word-break: break-word; /* для Chrome */

Если Вы используете что-то более правильное, с удовольствием приму передовой опыт)

Comments

[Senseich]

Столкнулся с такой же проблемой и word-wrap: break-word; действительно не правильно в хроме отрабатывает , а вот word-break: break-word; работает там как надо. Очень странно, ведь про это свойство нигде не написано ))

Answer 2

[Алексей Приказчиков]

Добавьте неразрывный пробел там где вам нужно, а лучше просто прогоните через Типограф (Студия Артемия Лебедева), он там их сам правильно выставит.

Comments

[swcalc]

Простите, не совсем понял о чем Вы ))). Текст user-generated, я не могу знать, где мне нужно ).

[Алексей Приказчиков]

Посмотрите типограф, там есть API доступ, и готовый класс на PHP

[Алексей Приказчиков]

Тем более он, форматирует текст удаляет лишние пробелы, заменяет кавычки и многое другое.

Answer 3

[Саша]

Попробуйте расставить неразрывной пробел с помощью этого сервиса
www.typograf.ru