多行文本超出用省略号代替，单击展开全部
生活随笔
收集整理的這篇文章主要介紹了
多行文本超出用省略号代替，单击展开全部
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
這里主要講解一個常見的文字處理程序，在我們開發(fā)的過程中，經(jīng)常會遇到一段很長的文字，但是我們在頁面上展示的時候，卻需要他展示成幾行，比如5行。
這里分享一個自己寫的小DEMO，大家可以參考一下：
先看一下效果圖：
（圖一）
（圖二）
如上“圖一”所示，我們在頁面加載的時候，讓文字顯示5行，超出的文字用省略號代替。
當(dāng)我們點擊文字的時候，所有的文字全部展示出來。如“圖二”所示。
具體的代碼如下：
<html><head><title>多行文字顯示省略號</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1"><style>.context-wrap{color: #3f3f3f;white-space: normal;word-wrap: break-word;margin-top: 8px;font-size: 16px;line-height: 30px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 5;text-overflow: ellipsis;overflow: hidden;min-height: 30px;}.on {color: #3f3f3f;white-space: normal;word-wrap: break-word;margin-top: 8px;font-size: 16px;line-height: 30px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 0;text-overflow: ellipsis;overflow: hidden;min-height: 30px;}</style><script>window.onload = function(e){document.getElementById("test").onclick = function(e){if($("#test").hasClass("on")){$("#test").removeClass("on").addClass("context-wrap");}else{$("#test").removeClass("context-wrap").addClass("on");}};}</script></head><body><div class="context"> <div id="test" class="context-wrap"> mayouchen,mayouchen,maouchen,mayouchen.mayoucen,mayouchen,mayouchen,maouchen,mayouchen.mayoucen,mayouchen,mayouchen,maouchen,mayouchen.mayouce,ayouchen,mayouchen,maouchen,mayouchen.mayoucen,mayouchen,mayouchen,maouchen,mayouchen.mayoucen,1111111111122222222222222222224444444444444444555 </div> </div><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script></body></html>這里的代碼雖然實現(xiàn)了效果，但是還是不夠簡潔。有小伙伴看到的話，可以提出自己的意見，在優(yōu)化一下。
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的多行文本超出用省略号代替，单击展开全部的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 千人糕说课稿教学设计一等奖听课记录
- 下一篇： 干净情侣网名142个