CSS Grid - ненужный разрыв слов - PullRequest
0 голосов
/ 18 ноября 2018

У меня проблема с сеткой CSS.

В следующем фрагменте, извлеченном из базы кода, у меня есть очень простая структура HTML с сеткой. Для содержимого установлено значение break-word , чтобы предотвратить переполнение текста. Несмотря на наличие достаточного места для того, чтобы текст НЕ был разбит, он создает разрыв строки непосредственно перед последней буквой.

Насколько я понимаю, в макете сетки элементы по умолчанию рассчитываются таким образом, чтобы максимально соответствовать содержимому, что в данном примере не так.

Удаление отступов из содержимого или полей из элемента сетки решает проблему, но для центрирования существует поле, и также необходимо заполнение.

Есть ли какое-либо свойство, которое я должен или могу использовать для решения этой проблемы?

P.S. Насколько мне известно, ошибки нет в Firefox, я нашел ее в Chrome и Safari.

.grid {
  display: grid;
  grid-template-columns: auto;
}

.item {
  margin: 0 auto;
}

p {
  word-break: break-word;
  padding: 0 4%;
}
<div class="grid">
  <div class="item">
    <p>HOTEL</p>
    <p>GRAND</p>
  </div>
</div>

1 Ответ

0 голосов
/ 18 ноября 2018

Это не ошибка, а сложный расчет.

Существует своего рода цикл для расчета окончательной ширины элемента, который создает проблему.Ширина сначала рассчитывается с учетом содержимого (поведение сжатия к размеру на основе используемых вами свойств), а затем при использовании процентного значения с отступом будет учитываться рассчитанная ширина 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)

enter image description here

Таким образом, у вас будет переполнение вместо переноса слова. Вы можете заметить такое поведение на 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

...