多行文本溢出省略号显示

最新推荐文章于 2024-09-05 15:51:55 发布

weixin_33957648

最新推荐文章于 2024-09-05 15:51:55 发布

阅读量63

点赞数 1

原文链接：http://www.cnblogs.com/mayufo/p/6227891.html

版权

补充1 js方法实现

原理：

1 通过给文字段固定的行高，每次通过固定的行高和可视高度进行判断
2 如果超过固定行高，减少显示的单词，直到显示我们希望的行高。

代码：

#block-with-text {
         height: 58px;
}

function ellipsizeText(id) {
        var el = document.getElementById(id);
        var wordArray = el.innerHTML.split(' ');
        while(el.scrollHeight > el.offsetHeight) {
            wordArray.pop();
            el.innerHTML = wordArray.join(' ') + '...';
        }
    }
    ellipsizeText('block-with-text');

demo https://jsfiddle.net/m3uv2ad3/1/

缺点

1 文本块需要有固定的高度
2 当其中某个单词过长的时候会造成省略号显示的问题 (个人感觉可以忽略)

注意：

1 以上是英文的使用，如果是中文，务必将里面的空格删掉，因为中文不是用空格划分的
demo https://jsfiddle.net/mayufo/m3uv2ad3/3/
2 在火狐下设置同样的高度中文显示的比较少，英文显示的行数会比较多。
3 如果中英混合，肯定就是按照中文的高度

测试已经测试火狐和chrome

补充2 css实现

原理：

1 分别设置两个伪类before和after，before用来显示省略号，after 用来隐藏省略号
2 当内容较少的时候 after会盖住before，不显示省略号
3 当内容较多需要省略号的时候，内容会把after挤出去，这样就能显示出省略号

代码

 .block-with-text {
            overflow: hidden;
            position: relative;
            line-height: 1.2em;
            /* max-height = line-height (1.2) * (3) 设置三行行高 */
            max-height: 3.6em;
            text-align: justify;
            /*省略号到右边距的位置 */
            margin-right: 15px;
             /*给省略号的宽度留位置,三个点的宽度大概14px, 最好不要小于这个宽度*/
            padding-right: 15px;
        }
       /*创建省略号*/
        .block-with-text:before {
            content: '...';
            position: absolute;
            /* 省略号的显示位置定位在右下方*/
            right: 0;
            bottom: 0;
        }
       /*遮盖省略号*/
        .block-with-text:after {
            content: '';
            position: absolute;
            /*设置遮盖省略号的位置 */
            right: 0;
            /*设置遮盖省的大小 */
            width: 1em;
            height: 1em;
            margin-top: 0.2em;
            /*设置遮盖省略号的背景颜色，这个要和背景颜色一致 */
            background: white;
        }

demo https://jsfiddle.net/mayufo/ehzyprds/