最近学习了一下怎么用省略号代替超出的文本。
虽然网上的资料很多，但俗话说得好，好记性不如烂笔头，还是记一下吧！
有两种方法，第一是用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/
