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

方法一

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

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

此方法只能显示一行。

效果如下

 

多行,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

方法二

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

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

效果如下

 方法三

显示固定宽度的内容。使用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("已省略……");
        }

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