將省略號插入 HTML 標籤以獲得寬內容
現代網頁設計採用彈性佈局來適應不同的瀏覽器視窗大小。這種靈活性為可變長度的元素(例如標題)帶來了挑戰。在標題變得比視窗寬的情況下,它們可能會換行成多行,從而損害所需的佈局。
為了優雅地解決這個問題,讓我們探索一種利用 CSS 將標題截斷為單行的解決方案如果內容超過可用寬度,則添加省略號 (...)。
基於CSS 的解決方案
以下基於CSS 的解決方案在現代瀏覽器中有效,因為它利用了文字溢位屬性:
用法
要應用此解決方案,只需將省略號類添加到標題中:
瀏覽器>
此純CSS 解決方案適用於除Firefox 6.0 之外的所有主要現代瀏覽器。對於 Firefox 6.0 或更早版本,請考慮支援多行換行,如本替代解決方案中所述。以上是如何使用 CSS 截斷帶有省略號的長 HTML 標題?的詳細內容。更多資訊請關注PHP中文網其他相關文章!