單行文本不折行，顯示不了的就用省略號表示
HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="ct">
多行文本固定高度的居中多行文本固定高度的居中
</div>
</body>
</html>
CSS代碼
.ct{
width: 200px;
white-space: nowrap;
border: 1px solid red;
overflow: hidden;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
overflow: hidden;
內(nèi)容超出寬度時隱藏超出部分的內(nèi)容
text-overflow: ellipsis;
當對象內(nèi)文本溢出時顯示省略標記(…)；需與overflow:hidden;
一起使用。
與上述方法符合所需要的條件： 1、可設(shè)置width（即內(nèi)聯(lián)或塊）的元素； 2、只對單行文本起作用。 瀏覽器兼容：IE/Firefox/Chrome/Opera等。
多行文本折行，顯示不了的就用省略號表示
CSS代碼
.ct{
width: 200px;
border: 1px solid red;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 4; /顯示的文本行數(shù)/
-webkit-box-flex: 4;
}
Mobile Web開發(fā)奇淫巧計 因使用了WebKit的CSS擴展屬性，該方法適用于WebKit瀏覽器及移動端；
與上述方法符合所需要的條件： 1.-webkit-line-clamp
用來限制在一個塊元素顯示的文本的行數(shù)。 為了實現(xiàn)該效果，它需要組合其他的WebKit屬性。常見結(jié)合屬性： 2.display: -webkit-box;
必須結(jié)合的屬性 ，將對象作為彈性伸縮盒子模型顯示 。 3.-webkit-box-orient
必須結(jié)合的屬性 ，設(shè)置或檢索伸縮盒對象的子元素的排列方式 。
.ct{
position: relative;
width: 200px;
line-height: 20px;
max-height: 40px;
overflow: hidden;
}
.ct::after{
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(rightright, transparent, #fff 55%);
background: -moz-linear-gradient(rightright, transparent, #fff 55%);
background: linear-gradient(to rightright, transparent, #fff 55%);
}
適用范圍： 該方法適用范圍廣，但文字未超出行的情況下也會出現(xiàn)省略號,可結(jié)合js優(yōu)化該方法。 注： 1.將height
設(shè)置為line-height
的整數(shù)倍，防止超出的文字露出。 2.給p::after
添加漸變背景可避免文字只顯示一半。 3.由于ie6-7不顯示content內(nèi)容，所以要添加標簽兼容ie6-7（如：<span>…<span/>
）；兼容ie8需要將::after
替換成:after
。
