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