How to Truncate HTML Content with Ellipsis for Responsive Layouts?

Truncating HTML Content with Ellipsis for Responsive Layouts

In the dynamic world of web design, managing variable content width can often be a challenge. When headlines or other text elements exceed the available container width, undesirable line wrapping can occur. For a more polished presentation, it's essential to find a solution that elegantly truncates the content and displays an ellipsis (...) if necessary.

CSS-Based Truncation

Fortunately, modern CSS provides a straightforward solution. By applying the following CSS classes to the relevant tag, you can achieve visually appealing truncation with support across most major browsers:

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

This CSS code forces the text to remain on a single line (white-space), prevents overflow by hiding excess content (overflow), and truncates the text with an ellipsis (text-overflow).

Note: Firefox 6.0 is an exception and does not support this technique.

jQuery Alternatives (Multi-Line Truncation)

If you require support for multi-line text or earlier Firefox versions, a jQuery-based solution may be necessary. However, this approach is generally not recommended as it adds unnecessary overhead to your website.

The above is the detailed content of How to Truncate HTML Content with Ellipsis for Responsive Layouts?. For more information, please follow other related articles on the PHP Chinese website!