Перерыв в Firefox для встроенных элементов

Question

Я пытаюсь изменить свойство word-break для некоторых встроенных элементов, таких как <span> и <a>, чтобы получить лучший поток содержимого страницы.

Похоже, что Firefox распознает свойство word-break для элементов, отображаемых как блок (например, <div>), в то время как Chrome отличает запрос на разрыв слов.

В приведенном ниже примере красные и синие части визуализируются идентично в Chrome (xxxxx разбит на несколько строк). В Firefox ххххх в красном поле переполняется.

<div style="width:200px;background:red;"> 
 
    Hello <span style="word-break:break-all;">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span> World 
 
</div> 
 

 
<div style="width:200px;background:blue;word-break:break-all;"> 
 
    Hello <span>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span> World 
 
</div>

Пример сверху: https://jsfiddle.net/7scx4hfq/

Какой браузер правильно ведет себя? Это ошибка Firefox или ошибка Chrome?

И что еще более важно, как я могу добиться желаемого эффекта во всех браузерах?

Примечание, установка word-break:break-all на уровне блока не является вариантом.

Answer 1

Вы можете попробовать добавить дополнительные word-wrap: break-word; для Firefox.

span { 
    word-break: break-all; /* for others */ 
    word-wrap: break-word; /* for Firefox */ 
} 

Если вы хотите сохранить весь текст в одной и той же линии, как можно больше, вы можете установить white-space: nowrap; на контейнере, и сбросить его white-space: normal; на span. Опять же, эти настройки предназначены только для Firefox.

div { 
 
    background: yellow; 
 
    width: 200px; 
 
    white-space: nowrap; 
 
} 
 
span { 
 
    background: aqua; 
 
    word-break: break-all; 
 
    word-wrap: break-word; 
 
    white-space: normal; 
 
}

<div> 
 
    Hello <span>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span> World 
 
</div>

jsFiddle