Блог

Главная - Вопросы по программированию - Firefox применяет свойство разрыва слов на основе существования пробелов

Firefox применяет свойство разрыва слов на основе существования пробелов

#html #css #google-chrome #firefox

#HTML #css #google-chrome #firefox

Вопрос:

Ниже приведены два фрагмента. Они отличаются только HTML-размещением пробелов, и они должны, за исключением пробелов, отображаться одинаково. Хотя это имеет место в Chrome, в Firefox они выходят из родительского контейнера.

Это вызывает два вопроса:

  1. Это ожидаемое поведение или ошибка?
  2. Как я могу избавиться от причудливости Firefoxes здесь?

 #inner {
  width: 300px;
  word-break: break-word;
}

.unit {
  white-space: nowrap;
}  
 <div id="inner">
  <span class="unit">
    <span>Group One:</span>
    <span>One</span>
    <span>Two</span>
    <span>Three</span>
  </span>
  <span class="unit">
    <span>Group Two:</span>
    <span>Four</span>
    <span>Five</span>
    <span>Six</span>
  </span>
  <span class="unit">
    <span>Group Three:</span>
    <span>Seven</span>
    <span>Eight</span>
    <span>Nine</span>
  </span>
</div>  

 #inner {
  width: 300px;
  word-break: break-word;
}

.unit {
  white-space: nowrap;
}  
 <div id="inner"><span class="unit"><span>Group One:</span><span>One</span><span>Two</span><span>Three</span></span><span class="unit"><span>Group Two:</span><span>Four</span><span>Five</span><span>Six</span></span><span class="unit"><span>Group Three:</span><span>Seven</span><span>Eight</span><span>Nine</span></span></div>

Комментарии:

1. возможно, поддержка не на 100% или вы обнаружили ошибку

2. @TemaniAfif Я создал отчет: bugzilla.mozilla.org/show_bug.cgi?id=1670705

Ответ №1:

Используйте break-all вместо break-word и добавляйте inline-block к элементам unit

 #inner {
  width: 300px;
  word-break: break-all;
}

.unit {
  display: inline-block;
  white-space: nowrap;
}  
 <div id="inner"><span class="unit"><span>Group One:</span><span>One</span><span>Two</span><span>Three</span></span><span class="unit"><span>Group Two:</span><span>Four</span><span>Five</span><span>Six</span></span><span class="unit"><span>Group Three:</span><span>Seven</span><span>Eight</span><span>Nine</span></span></div>