對于文本的溢出，我們可以分成兩種形式：
- 單行文本溢出
- 多行文本溢出
單行文本溢出省略
了解也很簡單，即文本在一行内顯示，超出部分以省略号的形式展現
實作方式也很簡單，涉及的css屬性有：
- text-overflow：規定當文本溢出時，顯示省略符号來代表被修剪的文本
- white-space：設定文字在一行顯示，不能換行
- overflow：文字長度超出限定寬度，則隐藏超出的内容
overflow設為hidden，普通情況用在塊級元素的外層隐藏内部溢出元素，或者配合下面兩個屬性實作文本溢出省略
white-space:nowrap，作用是設定文本不換行，是overflow:hidden和text-overflow：ellipsis生效的基礎
text-overflow屬性值有如下：
- clip：當對象内文本溢出部分裁切掉
- ellipsis：當對象内文本溢出時顯示省略标記（...）
text-overflow隻有在設定了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 > 多行文本溢出省略
多行文本溢出的時候，我們可以分為兩種情況：
- 基于高度截斷
- 基于行數截斷
基于高度截斷
僞元素 + 定位
核心的css代碼結構如下：
- position: relative：為僞元素絕對定位
- overflow: hidden：文本溢出限定的寬度就隐藏内容）
- position: absolute：給省略号絕對定位
- line-height: 20px：結合元素高度,高度固定的情況下,設定行高, 控制顯示行數
- height: 40px：設定目前元素高度
- ::after {} ：設定省略号樣式
代碼如下所示：
<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> 實作原理很好了解，就是通過僞元素絕對定位到行尾并遮住文字，再通過 overflow: hidden 隐藏多餘文字
這種實作具有以下優點：
- 相容性好，對各大主流浏覽器有好的支援
- 響應式截斷，根據不同寬度做出調整
一般文本存在英文的時候，可以設定word-break: break-all使一個單詞能夠在換行時進行拆分
基于行數截斷
純css實作也非常簡單，核心的css代碼如下：
- -webkit-line-clamp: 2：用來限制在一個塊元素顯示的文本的行數，為了實作該效果，它需要組合其他的WebKit屬性）
- display: -webkit-box：和1結合使用，将對象作為彈性伸縮盒子模型顯示
- -webkit-box-orient: vertical：和1結合使用 ，設定或檢索伸縮盒對象的子元素的排列方式
- overflow: hidden：文本溢出限定的寬度就隐藏内容
- 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核心的浏覽器，由于移動端大多數是使用webkit，是以移動端常用該形式
需要注意的是，如果文本為一段很長的英文或者數字，則需要添加word-wrap: break-word屬性
還能通過使用javascript實作配合css，實作代碼如下所示：
css結構如下：
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(){
//擷取文本的行高，并擷取文本的高度，假設我們規定的行數是五行，那麼對超過行數的部分進行限制高度，并加上省略号
$('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");
}
});
}) ![淺談移動端過長文本溢出顯示省略号的實作方案[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)