Почему правило CSS word-wrap: break-word не сжимает элемент в Firefox, когда соответствующее правило работает в Chrome?

Контейнер .form-field здесь ограничен шириной 300 пикселей, а legend внутри него имеет ширину 100%. Длинные слова внутри растягивают legend, чтобы переполнить ширину 300 пикселей.

Когда я применяю правило CSS break-word к Chrome, используя (нестандартное) определение WebKit word-break, длинное слово разрывается, а элемент legend сжимается до ожидаемой ширины 300 пикселей.

В Firefox соответствующее правило word-wrap не разбивает текст и не сокращает элемент, если я специально не установлю ширину legend в 300 пикселей. Почему я должен это сделать? Почему Firefox неправильно вычисляет «100% от 300 пикселей» и не изменяет размер legend?

Если вы посмотрите этот фрагмент в Firefox, вы увидите, что legend по-прежнему переполняет ширину 300px своего контейнера.

enter image description here

.form-field {
  border: none;
  padding: 0;
  max-width: 300px;
  margin: 0 auto 10px;
  outline: 1px solid purple;
}

.form-field legend {
  text-align: left;
  width: 100%;
  word-wrap: break-word;
  word-break: break-word;
}

.form-field input[type=text] {
    width: 100%;
    font-size: 16px;
    padding: 7px 14px;
    box-sizing: border-box;
    border: 1px solid #c8d7e1;
}
<fieldset class="form-field">
  <legend>Betweenthesetwo, InowfeltIhadtochoose. Mytwonatureshadmemoryincommonbutallotherfacultiesweremostunequallysharedbetweenthem.</legend>
  <input type="text">
</fieldset>

(Проверено в macOS Chrome 64 и Firefox 57).

1
And Finally 3 Мар 2018 в 12:39

3 ответа

Лучший ответ

Значение break-word word-break не поддерживается в Firefox. Просмотрите документацию по MDN, и вы увидите это:

enter image description here

2
Temani Afif 3 Мар 2018 в 13:00

Обновление CSS легенды

.form-field legend {
  text-align: left;
  width: 100%;
  word-wrap: break-word;
  word-break: break-all; // Modified 
}
0
Zuber 3 Мар 2018 в 11:09

Все, что нам нужно это

word-break: break-all;
0
vNext 3 Мар 2018 в 14:22