超出内容用省略号替代

最近学习了一下怎么用省略号代替超出的文本。

虽然网上的资料很多，但俗话说得好，好记性不如烂笔头，还是记一下吧！

有两种方法，第一是用CSS实现；第二是用js

HTML

<p id="text">9月10日，孙俪在微博晒出一张等等为小花小妹妹吹头发的照片，她还配文写道“瞧，咱这哥哥当的。”照片中，等等拿着吹风机认真的为妹妹小花吹着头发，十分可爱。等等还用手摸着妹妹的头，十分的细心。从侧面看，等等的表情很是认真。</p>

CSS

#text{width: 600px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

显示的效果是这样的

也就是不管你内容多少，它只会显示一行，最后用省略号代替

但是往往我们需要的是这样的效果

这个需要js实现

window.onload = function(){//获取对象var text = document.getElementById('text');//设置一个文字的最大长度var maxlen = 100;//获取对象文本内容var content = text.innerHTML;if(content.length > maxlen){//截取字符串var tmp = content.substring(0,maxlen);//显示在id为after中document.getElementById('after').innerHTML = tmp+"...";}};

这里附上原来一个大神的文章

http://www.zhangxinxu.com/wordpress/2009/09/%E5%85%B3%E4%BA%8E%E6%96%87%E5%AD%97%E5%86%85%E5%AE%B9%E6%BA%A2%E5%87%BA%E7%94%A8%E7%82%B9%E7%82%B9%E7%82%B9-%E7%9C%81%E7%95%A5%E5%8F%B7%E8%A1%A8%E7%A4%BA/

转载于:https://www.cnblogs.com/tsngke/p/4802251.html

总结

以上是生活随笔为你收集整理的超出内容用省略号替代的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。