单行文本溢出和多行文本溢出显示省略号

对于单行文本溢出，css 代码如下：

.test{
    width: value;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

'value' 为想要设置的宽度，对于多文本溢出，需要用到 js，代码如下：

textOverflow('.test')
function textOverflow(obj){
    var oH, oText;
    oH    = $(obj).height();
    oText = $(obj).children();
    if (oText.outerHeight() > oH) {
        while (oText.outerHeight() > oH) {
            oText.html(oText.html().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
        }
        var text = oText.html();
        if (text.substring(text.length-3) != '...') {
            if (text.substring(text.length-4) == '<br>') {
                oText.html(text.replace(/<br>$/, "..."));
            }else {
                oText.html(text + '...')
            }                   
        }       
    }
}

对于上面的 js 代码，只要先设置 test 的宽高就行。js 代码中后面判断文本最后面3个字符是不是省略号(为了防止文本是通过多个 br 标签换行，而不会出现省略号)，但是它限制了 html 的布局，大致布局如下：

<div class="test">
    <div>
       <!--  文本内容 -->
    </div>  
</div>

test 里面那个 div 标签可以换成 p、span、a、code 等等标签(楼主只试了这几个)，但是 test 里面需要有只能有一个子元素，不然获取的 oText 不是文本内容。

如果小伙伴们有什么更好的办法来亮瞎楼主的那个什么眼，欢迎在评论中留言。

 

转载于:https://www.cnblogs.com/LY-leo/p/5777135.html