要顯示帶有CSS的省略號，請使用文本跨流：省略號以及三個條件：1。在元素上設(shè)置寬度或最大寬度。 2。應(yīng)用白空間：nowrap或允許塊溢出。 3。使用溢出：隱藏以夾住文本。對于多行截斷，請使用-webkit-line-clamp與Display：-webkit-box和-webkit-box-orient：垂直保持溢出時：隱藏和文本跨流：Ellipsis。常見問題包括缺少溢出：隱藏，沒有寬度約束或不正確的顯示類型，例如未正確樣式的內(nèi)聯(lián)元素。

當(dāng)文本溢出其容器時，您想顯示一個省略號（…）而不是讓其從屏幕上運行時，CSS使用text-overflow: ellipsis具有整潔的內(nèi)置解決方案。這很簡單，但有一些條件。

省略者需要什么

只需設(shè)置text-overflow: ellipsis本身還不夠。為了使其正常運行，必須滿足三個基本條件：

• 該元素必須具有定義的寬度或最大寬度。
• 元素內(nèi)部的空白應(yīng)設(shè)置為nowrap ，否則容器必須允許在塊方向上溢出。
• 溢出需要隱藏，以使容器以外的任何東西都不可見。

這是一個基本示例：

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

沒有這三種樣式一起工作，省略號就不會出現(xiàn)。此設(shè)置非常適合單線截斷。

截斷多行文本

默認(rèn)text-overflow: ellipsis僅適用于單行。如果您要處理多行文本塊（例如描述或段落），則需要額外的CSS才能使省略號正確顯示。

一種常見的方法是使用-webkit-line-clamp以及其他一些屬性。您可以做到這一點：

 .multi-line-truncate {
  顯示：-webkit -box;
  -webkit-box-orient：垂直；
  -webkit-line-clamp：3; / *要顯示的行數(shù) */
  溢出：隱藏；
  文字跨流：省略號；
}

該方法使用特定于WebKit的樣式，這意味著它在大多數(shù)現(xiàn)代瀏覽器中都可以很好地工作，盡管較舊的瀏覽器可能無法完全支持它。如果關(guān)注瀏覽器的兼容性，則要考慮的選項是基于JavaScript的后備或夾緊庫。

當(dāng)它不起作用時 - 常見的陷阱

有時，即使您認(rèn)為一切都正確設(shè)置，省略號也不會顯示。一些常見問題包括：

• 缺少overflow: hidden ：沒有此，文字就溢出了。
• 沒有寬度約束：如果容器可以自由生長，則沒有溢出要隱藏。
• 不正確的顯示類型：對于多行夾緊，該元素必須像盒子一樣行為（ display: -webkit-box ）。

同樣，除非適當(dāng)樣式，否則<span></span>之類的內(nèi)聯(lián)元素可能不會尊重這些規(guī)則。在這種情況下，切換到display: inline-block可能會有所幫助。

總結(jié)

一旦您知道所需的條件，將省略于text-overflow的省略號就很簡單。無論是一行還是多行，鑰匙都是正確管理溢出和布局行為。這是一個很小的細(xì)節(jié)，但在拋光UI設(shè)計方面有很大的不同。

這就是一切 - 不太棘手，但是如果您不小心，很容易錯過一步。

以上是使用CSS Text-Overflow處理文本溢出的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！