如何在 CSS 中實現文字溢出的省略號（\'...\'）？

如何在CSS 中顯示文字溢出的省略號（「...」）

處理超出可用空間的文字時，通常需要視覺效果指示有更多內容可用的指示器。這可以透過使用 CSS 在 span 元素中顯示點（省略號）來實現。

要啟用此功能，請按照以下步驟操作：

1. 確保隱藏溢位：
   使用溢位：隱藏！重要；屬性來隱藏溢出的文字。
2. 使用文字溢位：
   新增 text-overflow: ellipsis;屬性來指示當文字溢出可用空間時應使用省略號 (...) 進行修剪。
3. 可選：空白控制：
   防止換行和確保省略號出現在最後一個字元之後，設定空白：nowrap;。

這是一個程式碼範例：

<code class="css">span {
    display: inline-block;
    width: 180px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}</code>

<code class="html"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span></code>

透過實作這些CSS 屬性，您可以在具有隱藏溢位的span 元素中有效地顯示省略號，表明在可見範圍之外還有更多可用文字。

以上是如何在 CSS 中實現文字溢出的省略號（\'...\'）？的詳細內容。更多資訊請關注PHP中文網其他相關文章！