首頁  >  文章  >  web前端  >  如何在 CSS 中實現文字溢出的省略號(\"...\")?

如何在 CSS 中實現文字溢出的省略號(\"...\")?

Susan Sarandon
Susan Sarandon原創
2024-10-30 21:20:30783瀏覽

How to Implement Ellipsis (

如何在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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn