1.只需要顯示一行的的情況:
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <style type="text/css"> 5 #one{ 6 width: 320px; 7 overflow: hidden;/*超出部分隱藏*/ 8 white-space: nowrap;/*不換行*/ 9 text-overflow:ellipsis;/*超出部分文字以...顯示*/ 10 } 11 </style> 12 </head> 13 <body> 14 <div id="one">title title title title title title title title</div> 15 </body> 16 </html>
2.顯示多行的情況：
2.1.如果只需要兼容webkit內核的瀏覽器：
display: -webkit-box;//-webkit-line-clamp必須結合的屬性 ，將對象作為彈性伸縮盒子模型顯示 -webkit-box-orient: vertical;//-webkit-line-clamp必須結合的屬性 ，設置或檢索伸縮盒對象的子元素的排列方式
-webkit-line-clamp: 3; //限制在一個塊元素顯示的文本的行數
overflow: hidden;
2.2.如果需要兼容多種瀏覽器：
/*
段落設置為position: relative;以便之后插入的內容相對於段落絕對定位；
通過將max-height設置為line-height的整數倍來限制最大可容納的行數；
*/
p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
/*
:after 選擇器在被選元素的內容后面插入內容。
content 屬性來指定要插入的內容。
position: absolute; bottom: 0; right: 0;決定省略號相對於父元素的定位。
linear-gradient為顏色線性漸變，具體如下方圖片所示。防止文字顯示一半。
*/
p:after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(right, 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%);
}
