要處理CSS中的文本佈局問題，請使用白空間屬性來控制包裝和溢出屬性以管理截斷。 1。將白空間與諸如普通，nowrap，pre-tre-in-trap或pre-line之類的值進行定義。 2。應(yīng)用文本跨流：省略號以及溢出：隱藏和白空間：NowRap用於單線截斷。 3。對於多行截斷，請使用顯示：-webkit-box，-webkit-line-clamp和-webkit-box-orient，指出有限的瀏覽器支持。 4。設(shè)置最小寬度：0上的flex項目中，以允許在狹窄的容器中包裹文本。 5。在單詞break：Break-All或Overflow-wrap之間進行選擇：斷開字：取決於分裂單詞是否可以接受。這些方法提供了可靠的文本佈局控件，而無需JavaScript。

在處理CSS中的文本佈局時，包裝和溢出是兩個常見問題，即使無法正確處理，可能會破壞您的設(shè)計。關(guān)鍵是要了解何時應(yīng)包裝，何時應(yīng)切斷文本以及如何根據(jù)上下文控制這些行為。

當文字不包裝時：使用white-space

有時，文本從屏幕上運行或拉伸比預(yù)期的容器寬，尤其是在內(nèi)容中沒有空間（例如長URL或代碼塊）時。

要解決此問題，您可以使用white-space 。這是一些共同的價值：

• normal ：默認行為，根據(jù)需要倒塌並包裹。
• nowrap ：完全防止包裹，將所有內(nèi)容都迫使所有線條上一行。
• pre-wrap ：保留空格，但允許包裝。
• pre-line ：類似於pre-wrap ，但將白道的序列倒入單個線路斷裂中。

例如：

 .文字 {
  白空間：預(yù)交；
}

這對於保留格式很有用，同時仍允許文本包裝在容器中。

截斷溢出的文字

如果要切斷溢出其容器並顯示省略號（ ... ）的文本，則需要將一些屬性組合起來。

這是單線截斷的典型設(shè)置：

 .truncate {
  白色空間：nowrap;
  溢出：隱藏；
  文字跨流：省略號；
}

這樣可以確保任何不合適的文本都將被省略號而不是溢出。

對於多行截斷，您需要更多：

 .multi-line-truncate {
  顯示：-webkit -box;
  -webkit-line-clamp：2;
  -webkit-box-orient：垂直；
  溢出：隱藏；
}

請記住-webkit-line-clamp僅在Webkit瀏覽器（例如Chrome和Safari）中起作用，因此最好在完整的跨瀏覽器支持並不關(guān)鍵的地方使用它。

確保文本在佈局中很好地包裝

容器有時甚至不尊重文本包裝。當使用Flexbox或網(wǎng)格佈局時，這通常會發(fā)生。

要注意的一件事：Flex項目默認情況下不會超過其最小內(nèi)容大小。因此，如果您有一個狹窄的容器，它可能會溢出。

為了防止這一點：

 。容器 {
  最小寬度：0;
}

結(jié)合overflow: hidden或text-overflow ，這有助於確保文本尊重容器大小。

另外，請記住，設(shè)置word-break或overflow-wrap可以幫助長話：

• word-break: break-all將在任何字符上分開任何字符以適合容器內(nèi)的單詞。
• overflow-wrap: break-word試圖保持整個單詞完整，但在必要時會破壞它們。

兩者在不同的情況下都很方便 - 根據(jù)您喜歡可讀性還是嚴格的空間控制。

基本上就是這樣。這些工具使您可以堅實地控製文本在不同情況下的行為，而無需依賴JavaScript或hacks。請記住瀏覽器怪癖，尤其是在多行截斷的情況下，然後在需要時進行測試。

以上是控制CSS中的文本包裝和溢出的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！