首頁 > web前端 > css教學 > 主體

css如何實現單行、多行文字超出顯示省略效果

云罗郡主
發布: 2018-11-21 15:06:49
原創
3201 人瀏覽過

這篇文章帶給大家的內容是關於css如何實現單行、多行文本超出顯示省略效果,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

單行文字省略

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;
}
登入後複製

效果如圖所示:

css如何實現單行、多行文字超出顯示省略效果

從效果來看,它的優點有:

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%);
}
登入後複製

效果如圖:

css如何實現單行、多行文字超出顯示省略效果

#適合場景:文字內容較多,確定文字內容一定會超過容器的,那麼選擇這種方式不錯。但文字未超出行的情況下也會出現省略號,可結合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 = []; //定义一个空数组
$(&#39;.box&#39;)。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) + &#39;…&#39;; //添加省略号并放进box文字内容后面
$(".box")。eq(i)。text(content);
} else {
登入後複製

以上就是css如何實現單行、多行文字超出顯示省略效果的全部介紹,如果您想了解更多有關CSS3教程,請關注PHP中文網。


以上是css如何實現單行、多行文字超出顯示省略效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:segmentfault.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板