如何使用 CSS 防止 HTML 標籤中的文字溢出？

向HTML 標籤添加省略號以防止文字溢出

在動態網頁中保持乾淨的佈局可能具有挑戰性，尤其是當內容可變時長度。如果彈性佈局中的標題 (h2) 超過瀏覽器視窗的寬度，它們可能會換行成多行，從而產生不良的外觀。

幸運的是，實作了一個優雅的解決方案來截斷標題並添加省略號指示符 ( ...) 僅使用 CSS 就非常簡單。此跨瀏覽器解決方案可在除 Firefox 6.0 之外的所有現代瀏覽器上無縫運作。

透過將以下CSS 樣式套用至標題標籤，您可以確保文字顯示在單行上，並在以下情況下以省略號截斷：必要：

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

這些屬性的組合強制文字保留在一行上而不換行，隱藏超出可用寬度的任何溢出，並添加省略號字元來指示截斷。

要獲得全面的支持，包括多行文字換行以及與舊版本 Firefox 的兼容性，請考慮實作 JavaScript 解決方案。

以上是如何使用 CSS 防止 HTML 標籤中的文字溢出？的詳細內容。更多資訊請關注PHP中文網其他相關文章！