單行文本溢出換省略號
white-space: nowrap; // 文字強制不換行
text-overflow: ellipsis; // 文字溢出換省略號
overflow: hidden; // 溢出文字隱藏
多行文本溢出換省略號
display: -webkit-box; // 元素轉(zhuǎn)換為彈性容器,在一行排列
-webkit-box-orient: vertical; /_ 表示盒子對象的子元素的排列方式 _/
-webkit-line-clamp: 3; /_ 限制文本的行數(shù)，表示文本第多少行省略 _/
text-overflow: ellipsis;/_ 打點展示 _/
overflow: hidden;/_ 超出部分進行隱藏 _/
一擒滑、前言
在日常開發(fā)展示頁面腐晾，如果一段文本的數(shù)量過長，受制于元素寬度的因素橘忱，有可能不能完全顯示赴魁，為了提高用戶的使用體驗，這個時候就需要我們把溢出的文本顯示成省略號
對于文本的溢出钝诚，我們可以分成兩種形式：
- 單行文本溢出
- 多行文本溢出
二颖御、實現(xiàn)方式
單行文本溢出省略
理解也很簡單，即文本在一行內(nèi)顯示，超出部分以省略號的形式展現(xiàn)
實現(xiàn)方式也很簡單潘拱，涉及的css屬性有：
text-overflow：規(guī)定當文本溢出時疹鳄，顯示省略符號來代表被修剪的文本
white-space：設(shè)置文字在一行顯示，不能換行
overflow：文字長度超出限定寬度芦岂，則隱藏超出的內(nèi)容
overflow設(shè)為hidden瘪弓，普通情況用在塊級元素的外層隱藏內(nèi)部溢出元素，或者配合下面兩個屬性實現(xiàn)文本溢出省略
white-space:nowrap禽最，作用是設(shè)置文本不換行腺怯，是overflow:hidden和text-overflow：ellipsis生效的基礎(chǔ)
text-overflow屬性值有如下：
clip：當對象內(nèi)文本溢出部分裁切掉
ellipsis：當對象內(nèi)文本溢出時顯示省略標記（...）
text-overflow只有在設(shè)置了overflow:hidden和white-space:nowrap才能夠生效的
舉個例子
<style>
p{
overflow: hidden;
line-height: 40px;
width:400px;
height:40px;
border:1px solid red;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
<p 這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本</p >
效果如下：
可以看到，設(shè)置單行文本溢出較為簡單川无，并且省略號顯示的位置較好
多行文本溢出省略
多行文本溢出的時候呛占，我們可以分為兩種情況：
- 基于高度截斷
- 基于行數(shù)截斷
基于高度截斷
偽元素 + 定位
核心的css代碼結(jié)構(gòu)如下：
position: relative：為偽元素絕對定位
overflow: hidden：文本溢出限定的寬度就隱藏內(nèi)容）
position: absolute：給省略號絕對定位
line-height: 20px：結(jié)合元素高度,高度固定的情況下,設(shè)定行高, 控制顯示行數(shù)
height: 40px：設(shè)定當前元素高度
::after {} ：設(shè)置省略號樣式
代碼如下所示：
<style>
.demo {
position: relative;
line-height: 20px;
height: 40px;
overflow: hidden;
}
.demo::after {
content: '...';
position: absolute;
bottom: 0;
right: 0;
padding: 0 20px 0 10px;
}
</style>
<body>
<div class="demo">這是一段很長的文本</div>
</body>
實現(xiàn)原理很好理解，就是通過偽元素絕對定位到行尾并遮住文字懦趋，再通過 overflow: hidden 隱藏多余文字
這種實現(xiàn)具有以下優(yōu)點：
兼容性好晾虑，對各大主流瀏覽器有好的支持
響應(yīng)式截斷，根據(jù)不同寬度做出調(diào)整
一般文本存在英文的時候仅叫，可以設(shè)置word-break: break-all使一個單詞能夠在換行時進行拆分
基于行數(shù)截斷
純css實現(xiàn)也非常簡單帜篇，核心的css代碼如下：
-webkit-line-clamp: 2：用來限制在一個塊元素顯示的文本的行數(shù)，為了實現(xiàn)該效果诫咱，它需要組合其他的 WebKit 屬性）
display: -webkit-box：和 1 結(jié)合使用笙隙，將對象作為彈性伸縮盒子模型顯示
-webkit-box-orient: vertical：和 1 結(jié)合使用 ，設(shè)置或檢索伸縮盒對象的子元素的排列方式
overflow: hidden：文本溢出限定的寬度就隱藏內(nèi)容
text-overflow: ellipsis：多行文本的情況下遂跟，用省略號“…”隱藏溢出范圍的文本
<style>
p {
width: 400px;
border-radius: 1px solid red;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<p>這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本 這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本</p>
可以看到逃沿，上述使用了webkit的CSS屬性擴展，所以兼容瀏覽器范圍是PC端的webkit內(nèi)核的瀏覽器幻锁，由于移動端大多數(shù)是使用webkit，所以移動端常用該形式
需要注意的是边臼，如果文本為一段很長的英文或者數(shù)字哄尔，則需要添加word-wrap: break-word屬性
還能通過使用javascript實現(xiàn)配合css，實現(xiàn)代碼如下所示：
css 結(jié)構(gòu)如下：
p {
position: relative;
width: 400px;
line-height: 20px;
overflow: hidden;
}
.p-after:after {
content: '...';
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -moz-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(left, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
javascript 代碼如下：
$(function () {
//獲取文本的行高柠并，并獲取文本的高度岭接，假設(shè)我們規(guī)定的行數(shù)是五行，那么對超過行數(shù)的部分進行限制高度臼予，并加上省略號
$('p').each(function (i, obj) {
var lineHeight = parseInt($(this).css('line-height'))
var height = parseInt($(this).height())
if (height / lineHeight > 3) {
$(this).addClass('p-after')
$(this).css('height', '60px')
} else {
$(this).removeClass('p-after')
}
})
})
