开发者

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

开发者 https://www.devze.com 2023-01-15 18:34 出处:网络
Does HTML support a behavior of text rendering where multiple lines will be avoided with an automatic placement of \"...\" ?So开发者_C百科rry, I just cannot find the style/tag associated with this beh

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


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.


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


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) . "...";
    }
?>
0

精彩评论

暂无评论...
验证码 换一张
取 消