实现指定字数文本溢出显示显示省略号...

迷南。 2022-05-09 00:56 333阅读 0赞

### **方法一** ###

使用css中text-overflow:ellipsis搭配其它css属性实现。

.boxCon {
        overflow: hidden;
        text-overflow:ellipsis;
    /*限制文本不换行，这样超出才能被截取*/
        white-space: nowrap;
    /*width自定义调整*/
        width:520px;
     }

此方法只能显示一行。

### **效果如下** ###

![css中text-overflow与overflow、white-space、width的搭配使用实现单行溢出显示...][css_text-overflow_overflow_white-space_width_...]

多行,css3解决了这个问题，解决方法如下：

display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。

\-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）

\-webkit-line-clamp:2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。

最后的css样式如下：

overflow:hidden;

text-overflow:ellipsis;

display:-webkit-box;

\-webkit-box-orient:vertical;

\-webkit-line-clamp:2;

转载自：[http://blog.csdn.net/bing0728004/article/details/51509435][http_blog.csdn.net_bing0728004_article_details_51509435]

### **方法二** ###

显示自定义字数。使用slice截取需要显示的字数追加省略号（...）实现。多行可行。

/*使用slice截取指定字数后追加...*/
    var str=txtData；
    if (str.length> 20) {
        str = str.slice(0, 20) + "...";
     }
    document.getElementById("boxId").innerHTML = str;

### **效果如下** ###

![使用slice截取所需字数追加...来实现][slice_...]

### ** 方法三** ###

显示固定宽度的内容。使用scrollWidth（实际内容的宽度，不包边线宽），clientWidth（内容可视宽度：不包含滚动条等边线）判断，当clientWidth小于scrollWidth时，对数据进行同方法二的处理。

document.getElementById("contxt_1").innerHTML = "当内容可视宽度小于实际内容的宽度...";
            var clientWidth = document.getElementById("contxt_1").clientWidth;
            var scrollWidth = document.getElementById("contxt_1").scrollWidth;
            if (clientWidth < scrollWidth) {
                alert("已省略……");
            }

根据需求的变化实现方法也会产生差异，除了自有的属性可快速实现外，仍有多种多样的实现可能性，需要不断的学习掌握更多技巧。

[css_text-overflow_overflow_white-space_width_...]: /images/20220509/7518c5534a9d4ed8911960a241195829.png
[http_blog.csdn.net_bing0728004_article_details_51509435]: http://blog.csdn.net/bing0728004/article/details/51509435
[slice_...]: /images/20220509/918e500f5d924d6cb0c4734bf117326f.png