這篇文章帶給大家的內容是關於css如何實現單行、多行文本超出顯示省略效果,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。
單行文字省略
.ellipsis-line { border: 1px solid #f70505; padding: 8px; width: 400px; overflow: hidden; text-overflow: ellipsis; //文本溢出显示省略号 white-space: nowrap; //文本不会换行 }
語法:
text-overflow:clip/ellipsis;
預設值:clip
適用於:所有元素
clip: 當物件內文字溢出時不顯示省略標記(…),而是將溢出的部分裁切掉。
ellipsis: 當物件內文字溢出時顯示省略標記(…)。
在使用的時候,有時候發現不會出現省略標記效果,經過測試發現,使用ellipsis的時候,必須配合overflow:hidden; white-space:nowrap; width:具體值;這三個樣式共同使用才會有效果。
多行文字省略
直接用css屬性-webkit-line-clamp:n;設定
在WebKit瀏覽器或行動裝置(絕大部分是WebKit內核的瀏覽器)的頁面實作比較簡單,可以直接使用WebKit的CSS擴充屬性(WebKit是私有屬性)-webkit-line-clamp ;注意:這是一個不規範的屬性(unsupported WebKit property),它沒有出現在CSS 規範草案中。
-webkit-line-clamp用來限制在一個區塊元素顯示的文字的行數。為了實現該效果,它需要組合其他的WebKit屬性。常見結合屬性:
display: -webkit-box; 必須結合的屬性 ,將物件作為彈性伸縮盒子模型顯示 。
-webkit-box-orient 必須結合的屬性 ,設定或檢索伸縮盒物件的子元素的排列方式 。
text-overflow: ellipsis;,可以用來多行文字的情況下,用省略號「…」隱藏超出範圍的文字。
這個屬性只適合WebKit瀏覽器或行動端(絕大部分是WebKit核心的)瀏覽器
.multi-line { border: 1px solid #f70505; width: 400px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
效果如圖所示:
從效果來看,它的優點有:
1.響應式截斷,根據不同寬度做出調整
2.文字超出範圍才顯示省略號,否則不顯示省略號
3.瀏覽器原生實現,所以省略號位置顯示剛好
但是缺點也是很直接,因為-webkit-line-clamp 是一個不規範的屬性,它沒有出現在CSS 規範草案中。也就是說只有 webkit 核心的瀏覽器支援這個屬性,像 Firefox, IE 瀏覽器統統都不支援這個屬性,瀏覽器相容性不好。
使用場景:多用於行動裝置頁面,因為行動裝置瀏覽器更多是基於 webkit 內核,除了相容性不好,實現截斷的效果不錯。
利用定位和偽類元素
p{ position: relative; width:400px; line-height: 20px; max-height: 60px; overflow: hidden; } p::after{ content: "…"; position: absolute; bottom: 0; right: 0; padding-left: 40px; background: -webkit-linear-gradient(left, transparent, #fff 55%); background: -o-linear-gradient(right, transparent, #fff 55%); background: -moz-linear-gradient(right, transparent, #fff 55%); background: linear-gradient(to right, transparent, #fff 55%); }
效果如圖:
#適合場景:文字內容較多,確定文字內容一定會超過容器的,那麼選擇這種方式不錯。但文字未超出行的情況下也會出現省略號,可結合js優化此方法。
附註:
將height設定為line-height的整數倍,防止超出的文字露出。
為p::after新增漸層背景可避免文字只顯示一半。
由於ie6-7不顯示content內容,所以要新增標籤相容ie6-7(如:…);相容ie8需要將::after替換成:after 。
結合js優化程式碼
css: p { position: relative; width: 400px; line-height: 20px; overflow: hidden; } .p-after:after{ content: "…"; position: absolute; bottom: 0; right: 0; padding-left: 40px; background: -webkit-linear-gradient(left, transparent, #fff 55%); background: -moz-linear-gradient(left, transparent, #fff 55%); background: -o-linear-gradient(left, transparent, #fff 55%); background: linear-gradient(to right, transparent, #fff 55%); }
js:
$(function(){ //获取文本的行高,并获取文本的高度,假设我们规定的行数是五行,那么对超过行数的部分进行限制高度,并加上省略号 $('p')。each(function(i, obj){ var lineHeight = parseInt($(this)。css("line-height")); var height = parseInt($(this)。height()); if((height / lineHeight) >3 ){ $(this)。addClass("p-after") $(this)。css("height","60px"); }else{ $(this)。removeClass("p-after"); } }); })
運用第三方外掛程式或自己寫腳本控制
網路上有許多介紹關於使用JavaScript實作多行文字溢出省略的辦法,有的使用插件,有的使用自己封裝好的JavaScript文件,但是,我認為,還是自己寫的js比較好用。
//div <div class="box">北京时间11月18日,苏州太湖马拉松女子比赛中,中国选手何引丽最终获得亚军,落后冠军5秒。但是赛后,何引丽在社交媒体上道歉,称自己最后时刻跑累了,没有拿稳国旗,这究竟是怎么回事?</div> //css .box { width: 400px; height: 40px; border: 1px solid #f70505; line-height: 20px; } //js <script type="text/javascript"> $(function() { var content_arr = []; //定义一个空数组 $('.box')。each(function() { //遍历box内容 var content = $.trim($(this)。text()); //去掉前后文空格 content_arr.push(content); //内容放进数组 }) for (var i = 0; i < content_arr.length; i++) { //遍历循环数组 if (content_arr[i].length >= 50) { //如果数组长度(也就是文本长度)大于等于50(数字可自己定义) content = content_arr[i].substr(0, 50) + '…'; //添加省略号并放进box文字内容后面 $(".box")。eq(i)。text(content); } else {
以上就是css如何實現單行、多行文字超出顯示省略效果的全部介紹,如果您想了解更多有關CSS3教程,請關注PHP中文網。
以上是css如何實現單行、多行文字超出顯示省略效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!