Это не ошибка, а сложный расчет.
Существует своего рода цикл для расчета окончательной ширины элемента, который создает проблему.Ширина сначала рассчитывается с учетом содержимого (поведение сжатия к размеру на основе используемых вами свойств), а затем при использовании процентного значения с отступом будет учитываться рассчитанная ширина 1 .В конце мы уменьшим вычисляемый отступ от ширины, создавая слово break.
Это произойдет с наименьшим значением, поскольку во всех случаях ширина всегда будет меньше необходимой ширины, чтобы вместить самое длинноеслово:
.grid {
display: grid;
grid-template-columns: auto;
}
.item {
margin:auto;
border:1px solid;
}
.pad p {
word-break: break-word;
padding: 0 1%;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>I_WILL_FOR_SURE_BREAK</p>
</div>
</div>
<div class="grid">
<div class="item pad">
<p>HOTEL</p>
<p>I_WILL_FOR_SURE_BREAK</p>
</div>
</div>
Как видите, первая сетка с отступами сокращается до ее содержимого, а вторая имеет точно такой же ширины изаполнение создает разрыв строки.
Простое решение - использовать значение в пикселях вместо процента в случае, если вы знаете нужное значение:
.grid {
display: grid;
grid-template-columns: auto;
justify-content:center;
}
.item {
margin:auto;
border:1px solid;
}
.pad p {
word-break: break-word;
padding: 0 20px;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>I_WILL_NOT_BREAK</p>
</div>
</div>
<div class="grid">
<div class="item pad">
<p>HOTEL</p>
<p>I_WILL_NOT_BREAK</p>
</div>
</div>
Почему вы не видите этого в Firefox?
Просто потому, что break-word
неподдерживается там (https://developer.mozilla.org/en-US/docs/Web/CSS/word-break)
Таким образом, у вас будет переполнение вместо переноса слова. Вы можете заметить такое поведение на Firefox, если вы используете break-all
:
.grid {
display: grid;
grid-template-columns: auto;
}
.item {
margin:auto;
border:1px solid;
}
p {
word-break: break-all;
padding: 0 1%;
}
<div class="grid">
<div class="item">
<p>HOTEL</p>
<p>I_WILL_FOR_SURE_BREAK</p>
</div>
</div>
1 : размер отступа в процентах относительноширина вмещающего блока. ref