?

#news_text { border: 1px solid red; width: 200px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /*這里可以設置文本顯示的行數*/ overflow: hidden; }<div id="news_text"> 要溢出去的文字要溢出去的文字要溢出去的文字要溢出去的文字要溢出去的文字要溢出去的文字要溢出去的文字 </div>

　　

上面的方法固然簡單實際并不怎么使用暫且我還沒有找到兼容IE 的做法于是自己寫了段JS實現上面相同的效果。

---

css 代碼

#news_text {
width: 150px;
word-break: break-all
}

HTML 代碼

<div id="news_text">
要溢出去的文字要溢出去的文字要溢出去的文字要溢出去的文字要溢出去的文字要溢出去的文字要溢出去的文字

</div>

JS 代碼

<script type="text/javascript">var news_text = document.getElementById("news_text");var maxLength = 40;var textLength = news_text.innerHTML;if (textLength.length > maxLength) {var texts = textLength.substring(0, maxLength);news_text.innerHTML = texts + "....."; } </script>

　　

可根據maxLength調節你的字數

轉載于:https://www.cnblogs.com/pandaer/p/5428653.html

總結

以上是生活随笔為你收集整理的设置文字多行显示溢出显示省略号的全部內容，希望文章能夠幫你解決所遇到的問題。

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