CSS网格-不必要的断字

Question

我的CSS网格有问题。

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

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

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

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

PS据我所知，该错误在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

这不是错误，而是复杂的计算。

有一种循环可以计算导致问题的元素的最终宽度。 首先考虑到内容（根据所使用的属性进行收缩以适应行为）来计算宽度，然后将百分比值与填充一起使用将考虑计算出的宽度¹ 。 最后，我们将从创建分词符的宽度中减少计算出的填充。

这将以最小值发生，因为在所有情况下，宽度始终小于要包含最长单词的宽度：

 .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