css實現文本超出省略號代替

css實現文字超出省略號代替

當我們在項目中，設計師給出方案，要求實現文字過長需要用省略號代替。如一行文字過長，超出一行的文字用省略號代替。有時候可能我們會用js去實現這個效果。不多說，直接上代碼。（js代碼如下）

var sl = document.getElementById("wenzishenglue").innerHTML.slice(0,20)+"...";
document.getElementById("wenzishenglue").innerHTML = sl;

var sl = document.getElementById("wenzishenglue").innerHTML.substring(0,20)+"...";
document.getElementById("wenzishenglue").innerHTML = sl;

var sl = document.getElementById("wenzishenglue").innerHTML.substr(0,20)+"...";
document.getElementById("wenzishenglue").innerHTML = sl;

這裏我使用了JavaScript string的三種方法實現提取20個文字，其後用省略號代替。然而並……

當設計師看到實際效果，咆哮，你這是什麼鬼……無語。我要的不是這種效果，後面還有那麼長的寬度，我要的是文字超出一行要省略號。呃，好吧！

後來去看css3文字效果，還真發現了一個號東西。是什麼呢，就是text-overflow。

text-overflow：規定當文本溢出包含元素時發生的事情。

值	說明
clip	修剪文本
ellipsis	顯示省略號來代替被修剪的文字
string	使用給定字符串代替被修剪的文字

實現文字超出一行用省略號代替，text-overflow: ellipsis;貼上代碼

{
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}

overflow使得超出的部分隱藏，white-space讓文字不換行，現在實現了文字超出一行用省略號代替。

但是這個屬性只實現單行文本超出，那麼多行文本呢？

代碼如下：

.duohang{
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
		}

這個方法使用了webkit的css擴展屬性，因此只適用於webkit內核的瀏覽器和移動端。

說明：

-webkit-line-clamp用來限制在一個塊元素顯示的文本的行數。 爲了實現該效果，它需要組合其他的WebKit屬性。

display:-webkit-box;必須屬性，將元素作爲彈性伸縮盒子模型顯示。

-webkit-box-orient；必須屬性，規定彈性伸縮盒子子元素的排列方式。