Home > Web Front-end > JS Tutorial > How to Truncate Long HTML Headlines with Ellipsis Using CSS?

How to Truncate Long HTML Headlines with Ellipsis Using CSS?

Mary-Kate Olsen
Release: 2024-10-29 23:18:29
Original
838 people have browsed it

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>
Copy after login

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>
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template