如何用省略號優雅地截斷 H2 標籤中的文字？

使用省略號截斷HTML 標籤中的文字

在響應式網頁設計的世界中，經常會遇到內容可能超出可用範圍的情況元素的寬度，導致不必要的文字換行或破損。對於具有動態文字長度的標題 (h2)，這可能會帶來美學挑戰。

問題：
如何優雅地截斷 h2 標籤中的內容並添加省略號 ( ...) 當文字超過螢幕或容器的可用寬度時？

解決方案：
幸運的是，現代網頁瀏覽器使用 CSS 提供了一個簡單的跨瀏覽器解決方案。將以下CSS 類別新增至h2 標籤，您可以達到所需的效果：

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

此CSS 類別套用下列設定：

• white-space: nowrap 防止文字換行。
• overflow：隱藏隱藏超出可用寬度的任何內容。
• text-overflow：省略號和 -o-text-overflow：省略號（對於 Opera ) 在截斷文字的末尾顯示省略號 (...)。

使用此 CSS 類，h2 標籤將優雅地截斷其內容，並在內容變得過寬時添加省略號容器。請注意，此解決方案對撰寫本文時的所有主要瀏覽器均有效，但 Firefox 6.0 除外。如需早期版本 Firefox 的支持，請考慮答案中提到的連結問題中提供的解決方案。

以上是如何用省略號優雅地截斷 H2 標籤中的文字？的詳細內容。更多資訊請關注PHP中文網其他相關文章！