HTML Single Line Text, appended with "..." if longer than one line?

Question

Does HTML support a behavior of text rendering where multiple lines will be avoided with an automatic placement of "..." ? Sorry, I just cannot find the style/tag associated with this behavior, if it exists!

Answer 1

No, there is nothing built in.

You need to either do it yourself serverside, or write some JavaScript that will count lines and replace the rest of the line with an ellipsis (...).

There is a text-overflow-mode defined in the CSS3 spec that will do this, but as a working draft it is not final and will not necessarily work on current browsers.

Answer 2

The property you're looking for is the CSS text-overflow: ellipses. Unfortunately it does not work in Firefox. Here is a resource on it:

http://www.css3.info/preview/text-overflow/

You can kind of hack it in Firefox, with e.g.

http://www.jide.fr/english/emulate-text-overflowellipsis-in-firefox-with-css

But the only real cross-browser solution would be a JavaScript one, like this maybe, or perhaps one of the ones in the comments on this page:

http://ajaxian.com/archives/ellipsis-or-%E2%80%9Ctruncate-with-dots%E2%80%9D-via-javascript

Answer 3

Short answer: No.

Longer answer: This is possible if you're using a programming backend (e.g. PHP) that outputs HTML to the front end. You could do something like

<?php
    if(str_len($yourText) > 100) {
        echo substr($yourText, 0, 100) . "...";
    }
?>