一行或两行后的CSS字省略号('...')

Question

我正在尝试使用CSS在JavaScript中创建一个自动换行,条件是:

如果DIV包含一个非常长的单词,例如"asdasfljashglajksgkjasghklajsghl",我想显示:

     |asdasfljashglajk...|

如果DIV包含一个长句,例如"如果我每次被告知我不能得到一分钱",我想显示:

     |if i had a dime for|
     |everytime i was... |

我使用HTML,CSS,JavaScript.我不能使用jQuery.

如果有可能请告诉我.

Answer 1

我知道我对anwser有点迟了但是我只是编写了一些代码,这些代码同时包含:

    if ($('your selector').height() > 50) {
        var words = $('your selector').html().split(/\s+/);
        words.push('...');

        do {
            words.splice(-2, 1);
            $('your selector').html( words.join(' ') );
        } while($('your selector').height() > 50);
    }

当然,您应该将jQuery选择器保存在变量中,这样您就不会每次都查询DOM.

Answer 2

发现这个:

http://codepen.io/martinwolf/pen/qlFdp

看起来像-webkit-line-clamp在某些浏览器中工作.

Answer 3

为此你可以使用text-overflow: ellipsis;财产.写这样的

white-space: nowrap;
text-overflow: ellipsis;