最近學習了一下怎么用省略號代替超出的文本。

雖然網上的資料很多，但俗話說得好，好記性不如爛筆頭，還是記一下吧！

有兩種方法，第一是用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

總結

以上是生活随笔為你收集整理的超出内容用省略号替代的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。