1）單行文本溢出隱藏
核心css語(yǔ)句：
1、overflow：hidden; （超出設(shè)置的寬度就隱藏內(nèi)容）
2、white-space：nowrap; （設(shè)置文字在一行顯示不能換行）
3、text-overflow：ellipsis;（設(shè)置當(dāng)文本溢出時(shí)顯示省略符號(hào)來(lái)代表被剪去的文本）
設(shè)置ul寬度為200，超出的文字內(nèi)容讓其自動(dòng)隱藏并顯示.........
css部分：
ul{
width：200px;
padding：10px;
border：1px solid #ccc;
}
li{
overflow：hidden;
text-overflow：ellipsis;
white-space：nowrap;
}
html部分：
<ul>
<li>單行文本溢出顯示省略號(hào)單行文本溢出顯示省略號(hào)</li>
<li>單行文本溢出顯示省略號(hào)單行文本溢出顯示省略號(hào)</li>
<li>單行文本溢出顯示省略號(hào)單行文本溢出顯示省略號(hào)</li>
</ul>
2）多行溢出隱藏
核心css語(yǔ)句：
1、-webkit-line-clamp：2; （限制在一個(gè)塊元素內(nèi)顯示的文本的行數(shù)，2表示最多顯示2行。 為了實(shí)現(xiàn)該效果，它需要組合其他的WebKit屬性）
2、display： -webkit-box；（和1結(jié)合使用，將對(duì)象作為彈性伸縮盒子模型顯示）
3、-webkit-box-orient：vertical；（ 和1結(jié)合使用 ，設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式 。）
4、overflow：hidden；（超出設(shè)置的寬度就隱藏內(nèi)容）
5、text-overflow: ellipsis;（設(shè)置當(dāng)文本溢出時(shí)顯示省略符號(hào)來(lái)代表被剪去的文本）
設(shè)置div寬度為200，超出的文字內(nèi)容讓其自動(dòng)隱藏并顯示.........
css部分：
div{
width：200px;
padding：10px;
border：1px solid #ccc;
}
p{
display： -webkit-box;
-webkit-box-orient： vertical;
-webkit-line-clamp： 2;
overflow：hidden;
text-overflow：ellipsis;
}
html部分：
<div>
<p>多行文本溢出顯示省略號(hào)多行文本溢出顯示省略號(hào)多行文本溢出顯示省略號(hào)多行文本溢出顯示省略號(hào)</p>
</div>
遠(yuǎn)近互聯(lián)前端小王整理發(fā)布，希望能對(duì)學(xué)習(xí)技術(shù)的你有所幫助
遠(yuǎn)近互聯(lián)專(zhuān)業(yè)提供網(wǎng)站建設(shè)、APP開(kāi)發(fā)、網(wǎng)站優(yōu)化、外貿(mào)網(wǎng)站SEO、微信運(yùn)營(yíng)的品牌整合營(yíng)銷(xiāo)服務(wù)讓客戶(hù)通過(guò)網(wǎng)絡(luò)品牌建立與網(wǎng)絡(luò)傳播提高業(yè)績(jī)。
