首頁 > web前端 > js教程 > 如何使用 CSS 截斷帶有省略號的長 HTML 標題?

如何使用 CSS 截斷帶有省略號的長 HTML 標題?

Mary-Kate Olsen
發布: 2024-10-29 23:18:29
原創
837 人瀏覽過

How to Truncate Long HTML Headlines with Ellipsis Using CSS?

將省略號插入 HTML 標籤以獲得寬內容

現代網頁設計採用彈性佈局來適應不同的瀏覽器視窗大小。這種靈活性為可變長度的元素(例如標題)帶來了挑戰。在標題變得比視窗寬的情況下,它們可能會換行成多行,從而損害所需的佈局。

為了優雅地解決這個問題,讓我們探索一種利用 CSS 將標題截斷為單行的解決方案如果內容超過可用寬度,則添加省略號 (...)。

基於CSS 的解決方案

以下基於CSS 的解決方案在現代瀏覽器中有效,因為它利用了文字溢位屬性:

用法

要應用此解決方案,只需將省略號類添加到標題中:

瀏覽器>

此純CSS 解決方案適用於除Firefox 6.0 之外的所有主要現代瀏覽器。對於 Firefox 6.0 或更早版本,請考慮支援多行換行,如本替代解決方案中所述。

以上是如何使用 CSS 截斷帶有省略號的長 HTML 標題?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板