Insert ellipsis (…) into HTML tag if content too w-第2页回答

I have a webpage with an elastic layout that changes its width if the browser window is resized.

In this layout there are headlines (h2) that will have a variable length (actually being headlines from blogposts that I don't have control over). Currently - if they are wider than the window - they are broken into two lines.

Is there an elegant, tested (cross-browser) solution - for example with jQuery - that shortens the innerHTML of that headline tag and adds "..." if the text would be too wide to fit into one line at the current screen/container width?

标签： javascript html ellipsis elasticlayout

24条回答

流年柔荑漫光年

2楼-- · 2018-12-31 10:53

I couldn't find a script that worked exactly as I wanted it so did my own for jQuery - quite a few options to set with more on their way :)

https://github.com/rmorse/AutoEllipsis

0人赞添加讨论(0) 举报

不再属于我。

3楼-- · 2018-12-31 10:54

Here's another JavaScript solution. Works very good and very fast.

https://github.com/dobiatowski/jQuery.FastEllipsis

Tested on Chrome, FF, IE on Windows and Mac.

0人赞添加讨论(0) 举报

浪荡孟婆

4楼-- · 2018-12-31 10:55

There's actually a pretty straightforward way to do this in CSS exploiting the fact that IE extends this with non-standards and FF supports :after

You can also do this in JS if you wish by inspecting the scrollWidth of the target and comparing it to it's parents width, but imho this is less robust.

Edit: this is apparently more developed than I thought. CSS3 support may soon exist, and some imperfect extensions are available for you to try.

That last one is good reading.

0人赞添加讨论(0) 举报

看风景的人

5楼-- · 2018-12-31 10:55

I rewrote Alex's function to use to the MooTools library. I changed it a bit to word jump rather than add the ellipsis in the middle of a word.

Element.implement({
ellipsis: function() {
    if(this.getStyle("overflow") == "hidden") {
        var text = this.get('html');
        var multiline = this.hasClass('multiline');
        var t = this.clone()
            .setStyle('display', 'none')
            .setStyle('position', 'absolute')
            .setStyle('overflow', 'visible')
            .setStyle('width', multiline ? this.getSize().x : 'auto')
            .setStyle('height', multiline ? 'auto' : this.getSize().y)
            .inject(this, 'after');

        function height() { return t.measure(t.getSize).y > this.getSize().y; };
        function width() { return t.measure(t.getSize().x > this.getSize().x; };

        var func = multiline ? height.bind(this) : width.bind(this);

        while (text.length > 0 && func()) {
            text = text.substr(0, text.lastIndexOf(' '));
            t.set('html', text + "...");
        }

        this.set('html', t.get('html'));
        t.dispose();
    }
}
});

0人赞添加讨论(0) 举报

人间绝色

6楼-- · 2018-12-31 10:56

DO THE ELLIPSIS USING ONLY CSS

<html>
<head>
<style type="text/css">
#ellipsisdiv {
    width:200px;
    white-space: nowrap;  
    overflow: hidden;  
    text-overflow: ellipsis;  
}  
</style>
</head>
<body>
<div id="ellipsisdiv">
This content is more than 200px and see how the the ellipsis comes at the end when the content width exceeds the div width.
</div>
</body>
</html>

*This code works on most current browsers. If you experience any problem with Opera and IE (which probably you won't), add these in the style:

-o-text-overflow: ellipsis;  
-ms-text-overflow: ellipsis;

* This feature is part of CSS3. Its complete syntax is:

text-overflow: clip|ellipsis|string;

0人赞添加讨论(0) 举报

泪湿衣

7楼-- · 2018-12-31 10:56

you can do this much easier with css only, for example : sass mode

.truncatedText {
   font-size: 0.875em;
   line-height: 1.2em;
   height: 2.4em; // 2 lines * line-height
   &:after {
      content: " ...";
   }
}

and you have ellipsis ;)

0人赞添加讨论(0) 举报

Insert ellipsis (…) into HTML tag if content too w

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间