CSS网格-不必要的断字

Question

我对CSS网格有疑问。

在从代码库中提取的以下代码段中，我有一个非常简单的HTML结构，带有网格布局。内容设置为断字，以防止文本溢出。事件虽然有足够的空间使文本不会折断，但确实会在最后一个字母之前创建换行符。

我的理解是，在网格布局中，默认情况下，项目会被计算为尽可能适合内容，而在本示例中情况并非如此。

从内容或网格项的边距中删除填充确实可以解决此问题，但是边距用于居中，也需要填充。

是否有我必须或可以用来解决此问题的属性？

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>

Answer 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）

所以您将有一个溢出而不是一个字中断。如果使用break-all，您可能会在firefox上注意到此行为：

.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>

  

¹ ：相对于包含块的宽度的填充大小（以百分比表示）。 ^ref