在HTML頁面中經(jīng)常會遇到文本溢出，需要將超出的部分隱藏并顯示省略號的情況，那么這個文本溢出顯示省略號效果是怎么實現(xiàn)的呢？下面本篇文章就來給大家介紹一下使用CSS實現(xiàn)文本溢出顯示省略號效果的方法，希望對大家有所幫助。
想要實現(xiàn)文本溢出顯示省略號效果其實很簡單，可以使用text-overflow: ellipsis;和overflow：hidden;并輔助其他的一些CSS樣式來完成。overflow：hidden;表示不顯示超過對象尺寸的內(nèi)容，也就是把超出的部分隱藏；text-overflow: ellipsis;表示當(dāng)文本溢出包含元素時使用省略符號來代表被修剪的文本。
文本溢出顯示省略號效果可以分為兩種：
● 單行文本溢出顯示省略號：這種都應(yīng)用于標(biāo)題中，當(dāng)標(biāo)題過長，可以將超出部分用省略號(....)來顯示。
● 多行文本溢出顯示省略號：這種都應(yīng)用于描述中，當(dāng)描述內(nèi)容過多，無法一次全部顯示，就可以將超出部分用省略號(....)來顯示。
下面我們通過示例來看看實現(xiàn)方法
示例1：單行文本溢出
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本溢出部分顯示省略號</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.box {
width: 300px;/*指定寬度*/
height: 100px;
margin: 50px auto;
padding: 10px 0px;
border: 1px dashed palevioletred;
}
h2 {
overflow: hidden;/*超出部分隱藏*/
white-space: nowrap;/*規(guī)定段落中的文本不進(jìn)行換行 */
text-overflow: ellipsis;/* 超出部分顯示省略號 */
-o-text-overflow: ellipsis;/* 超出部分顯示省略號 */
}
h3 {
overflow: hidden;/*超出部分隱藏*/
white-space: nowrap;/*規(guī)定段落中的文本不進(jìn)行換行 */
text-overflow: ellipsis;/* 超出部分顯示省略號 */
-o-text-overflow: ellipsis;/* 超出部分顯示省略號 */
}
</style>
</head>
<body>
<div class="box">
<h2>css 實現(xiàn)單行文本超出長度顯示省略號</h2><br />
<h3> css 實現(xiàn)單行文本超出長度顯示省略號</h3>
</div>
</body>
</html>
效果圖：
說明：
white-space: nowrap;用于指定段落中的文本不進(jìn)行換行，這樣超出的文本就不會在下一行顯示。
示例2：多行文本溢出
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本溢出部分顯示省略號</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.box{
? ? ? ? ? ? ? ? width: 280px;
? ? ? ? ? ? ? ? height: 70px;
? ? ? ? ? ? ? ? margin: 50px auto;
? ? ? ? ? ? ? ? font-size: 20px;
? ? ? ? ? ? ? ? border: 1px dashed palevioletred;
? ? ? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? ? ? text-overflow: ellipsis;
? ? ? ? ? ? ? ? display: -webkit-box;
? ? ? ? ? ? ? ? -webkit-line-clamp: 3;
? ? ? ? ? ? ? ? -webkit-box-orient: vertical;
? ? ? ? ? ? }
? ? ? </style>?
? </head>
? ? <body>
? ? ? ? <div class="box">
? ? ? ? ? ? css 實現(xiàn)多行文本溢出部分顯示省略號，css 實現(xiàn)多行文本溢出部分顯示省略號，
? ? ? ? ? ? css 實現(xiàn)多行文本溢出部分顯示省略號
? ? ? ? </div>
? ? </body>
</html>
效果圖：
說明：
-webkit-line-clamp?用來限制在一個塊元素顯示的文本的行數(shù),這是一個不規(guī)范的屬性（unsupported WebKit property），它沒有出現(xiàn)在 CSS 規(guī)范草案中；
display: -webkit-box?將對象作為彈性伸縮盒子模型顯示 ；
-webkit-box-orient?設(shè)置或檢索伸縮盒對象的子元素的排列方式 ；
