首頁 >web前端 >css教學 >如何在溢出的跨距中顯示省略號?

如何在溢出的跨距中顯示省略號?

Mary-Kate Olsen
Mary-Kate Olsen原創
2024-10-27 12:26:30416瀏覽

How Can I Display an Ellipsis in an Overflowing Span?

在溢位跨度中顯示省略號

要在隱藏溢位的跨度中顯示點(「...」),您可以使用text-overflow:省略號屬性。它會截斷溢出的文字並顯示省略號。

以下是實現它的方法:

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

在此程式碼段中:

  • display: inline-block允許跨度佔用內聯空間,同時佔用內聯空間,同時仍然像塊一樣。
  • 寬度:180px將跨度的寬度設定為180像素。
  • 空白:nowrap防止文字換行
  • overflow: hide !important 確保內容在溢出 span 寬度時隱藏。
  • text-overflow: ellipsis 截斷文字並在內容溢位時顯示省略號.

透過組合這些屬性,您可以在範圍中顯示省略號,表示還有更多內容隱藏在視圖中。

以上是如何在溢出的跨距中顯示省略號?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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