How to Truncate Long HTML Headlines with Ellipsis Using CSS?

Inserting Ellipsis into HTML Tags for Wide Content

Modern web design employs elastic layouts that adapt to varying browser window sizes. This flexibility poses challenges for elements with variable lengths, such as headlines. In a scenario where headlines become wider than the window, they may wrap onto multiple lines, compromising the desired layout.

To tackle this issue elegantly, let's explore a solution that leverages CSS to truncate the headlines on a single line and add an ellipsis (...) if the content exceeds the available width.

CSS-Based Solution

The following CSS-based solution is effective in modern browsers, as it leverages the text-overflow property:

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

Usage

To apply this solution, simply add the ellipsis class to the headlines:

<code class="html"><h2 class="ellipsis">This is a potentially long headline</h2></code>

Browser Compatibility

This CSS-only solution works across all major modern browsers, except Firefox 6.0. For Firefox 6.0 or earlier, consider supporting multiline wrapping as outlined in this alternative solution.

The above is the detailed content of How to Truncate Long HTML Headlines with Ellipsis Using CSS?. For more information, please follow other related articles on the PHP Chinese website!