如何使用省略號截斷過長的 HTML 標頭？

截斷過寬 HTML 標題的優雅解決方案

在版面可調整的動態網頁中，經常會遇到不同長度的標題 (h2)。當這些標題超過瀏覽器視窗寬度時，它們通常會分成多行。為了避免這種不良行為，讓我們探索一種複雜的解決方案來截斷標題文本，並在標題文本溢出到多行時插入省略號 (...)。

利用 CSS 的強大功能，我們可以設計一個十字- 輕鬆實現此截斷的瀏覽器解決方案。程式碼如下：

<code class="css">.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}</code>

此程式碼定義了一個名為「ellipsis」的CSS 類，具有特定屬性：

• white-space: nowrap;: 防止防止文字換行到多行。
• overflow: hide;: 隱藏超出元素寬度的任何文字。
• text-overflow: ellipsis; 和-o-text-overflow: ellipsis;：分別在大多數現代瀏覽器和Opera 的截斷文字末尾插入省略號(...)。

將此 CSS 類別應用於有問題的 h2 元素，您可以確保它們將被截斷為單行，並在文字溢位時顯示省略號。此解決方案既優雅又相容於除 Firefox 6.0 之外的所有主流瀏覽器。對於早期版本的 Firefox，您可以參考其他解決多行文字換行問題的資源。

以上是如何使用省略號截斷過長的 HTML 標頭？的詳細內容。更多資訊請關注PHP中文網其他相關文章！