FF не отображает свойство CSS переноса по словам

Question

Я экспериментирую в рамках Wordpress, стараясь, чтобы заголовки постов блога отображались в виде большого квадратного блока, а разрывы строк появлялись в середине слова, если это необходимо для поддержания формы.

Использование word-wrap и (очевидно) word-break свойства CSS, я получил вид, который хотел ... в Safari / Chrome.Firefox 7 отказывается разбивать слова на части.IE работает немного лучше, чем FF, но разрывы строк кажутся более произвольными (кроме того, IE на самом деле не является приоритетом).В основном я пытаюсь выяснить, почему word-wrap и / или word-break не будут работать в этом случае в FF.

• Я не использую таблицы.
• word-break кажется активным свойством CSS здесь.Когда я удалил его и протестировал страницу в Safari / Chrome, строки перестали разрывать средние слова.
• Я не думаю, что какие-либо автоматически применяемые классы Wordpress (hentry, format-standard и т. Д.) Играютроль, но поправьте меня, если я ошибаюсь.Кроме стиля, показанного в ссылке jsfiddle, другой CSS является стандартной темой Twenty Eleven WP.

Живой пример: (упрощенный, но точный HTML / CSS): http://jsfiddle.net/3U4Xc/1/

Любой вклад приветствуется.

Answer 1

Это не работает, потому что Firefox 7 не поддерживает word-break.

Примечание, которое не решит вашу проблему white-space: -moz-pre-wrap; не будет работать и в Firefox 7. Это должно быть white-space: pre-wrap;

Answer 2

Так как ваш div использует text-align: justify, вы не получите ничего дальше. Кроме того, пробелы в вашем коде могут быть упрощены до пробелов: pre; Однако выравнивание текста с одной стороны по сравнению с предварительно отформатированным с другой не заводит друзей. Полагаю, не слишком уверен насчет этого слова, HTML5. Что именно вы пытаетесь достичь? Что-то / не / ломается, или ломается, где вы хотите раскол? Имейте в виду, но размеры экрана и пользовательские настройки всегда были известны тем, что завинчивали любое статическое расположение.