1.0 單行文本溢出（頁面中多余的文本仍然存在 只是顯示的時候用戶的角度溢出的部分文本是省略號代替的）
<style>
.text{
width : 500px;
height: 50px;
line-height : 50px;
/* 單行文本溢出的省略號的關(guān)鍵性代碼*/
over-flow :hidden;
white-space : nowrap ;
text-overflow :ellipsis ;
}
</style>
<body>
<p class="text">這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本</p>
</body>
image.png
2.0 多行文本溢出 (按行數(shù))
- 純Css 實現(xiàn)（頁面中多余的文本仍然存在 只是顯示的時候用戶的角度溢出的部分文本是省略號代替的）
- -webkit-line-clamp: 2衔峰；（用來限制在一個塊元素顯示的文本的行數(shù)，2 表示最多顯示 2 行。為了實現(xiàn)該效果擎勘，它需要組合其他的 WebKit 屬性）;
- display: -webkit-box；（和 1 結(jié)合使用鹿寨，將對象作為彈性伸縮盒子模型顯示 ）蕊肥；
- webkit-box-orient: vertical；（和 1 結(jié)合使用 众弓，設(shè)置或檢索伸縮盒對象的子元素的排列方式 ）；
- overflow: hidden隔箍；（文本溢出限定的寬度就隱藏內(nèi)容）谓娃；
- text-overflow: ellipsis；（多行文本的情況下蜒滩，用省略號 “…” 隱藏溢出范圍的文本)滨达；
<style>
.demo{
width:500px;
/* 不要設(shè)置高度高度會由內(nèi)容撐開 */
-webkit-line-clamp: 3;
display: -webkit-box;
/*不設(shè)置高度 這個屬性不要忘記設(shè)置哦 不然...不生效*/
-webkit-box-orient: vertical;
overflow: hidden;
/*text-overflow: ellipsis 可以不用設(shè)置 其他幾個屬性必須設(shè)置*/
/*text-overflow: ellipsis; */
}
</style>
<body>
<p class="demo">這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本</p>
</body>
image.png
2.js 實現(xiàn) 奶稠；（頁面中多余的文本已經(jīng)不存在 多余的文本截掉用省略號代替）
<style>
#demo{
width: 100%;
font-size : 20px;
}
</style>
<body>
<div id="demo"></div>
<script>
const ele = document.getElementById("demo") ;
const text = ''這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本；''
const totalNum = text.length ; //----> 文本的個數(shù)
formartStr =()=>{
const lineNum = 2 ; // ----> 行數(shù)
const lineWidth = window.getComputedStyle(ele,null).width ; //-----> 行寬
const fontSizeWidth = window.getComputedStyle(ele,null).fontSize 捡遍； // ----> 字體的大小
const num = Math.floor( lineWidth.slice(0,-2)/fontSizeWidth.slice(0,-2 )) ; //----> 一行可以顯示多少個字符（純文本 若不是純文本會存在誤差）
const strNum = num*lineNum锌订；
const lastIndex = strNum - totalNum ; //--->可以理解為 需要截掉的字符的個數(shù)
let content = '' ;
if(totalNum > strNum){
content = text.slice(0,lastIndex-3).concat('...')
}else {
content = text ;
}
ele.innerText = content ;
}
formatStr()
window.onresize =()=>{
formatStr()
}
</script>
</body>
</style>
image.png
- 多行文本溢出（按高度）
1 溢出隱藏 沒有省略號 ;（頁面中多余的文本仍然存在 只是給隱藏了用戶看不到）
<style>
#demo{
height :40px;
/*結(jié)合元素高度,高度固定的情況下,設(shè)定行高, 控制顯示行數(shù)*/
line-height : 20px;
overflow:hidden ；
/* 只顯示兩行 多余的內(nèi)容隱藏*/
}
</style>
<body>
<div id="demo"></div>
<script>
document.getElementById('demo').innerText = '這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本'
</script>
</body>
image.png
2 偽元素+定位實現(xiàn)多行省略
適用場景 ： 適用于對省略效果要求較低画株，文本一定會溢出元素的 情況辆飘；
缺點 :
-無法識別文字的長度，無論文本是否溢出 都會顯示省略號 ;
-省略號顯示可能不會剛剛好谓传，有時會遮住一半文字
<style>
.text{
height: 40px;
/*結(jié)合元素高度,高度固定的情況下,設(shè)定行高, 控制顯示行數(shù)*/
line-height : 20px;
over-flow :hidden;
/* 父元素設(shè)置相對定位*/
position :relative ;
}
.text::after {
/* 偽元素設(shè)置絕對定位*/
position :absolute ;
bottom: 0;
right: 0;
content:"..."
padding: 0 20px 0 10px;
}
</style>
<body>
<p class="text">這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本</p>
</body>
3 利用float 純css 實現(xiàn)多行文本溢出省略
<style>
.demo{
max-height:40px;
line-height:20px;
overflow:hidden ;
}
.demo::before{
float : left ;
content : '';
width:20px;
height :40px;
}
.demo .text{
float : right ;
width :100% ;
margin-left:-20px;
word-break: break-all;
}
.demo::after{
float:right;
content:'...';
width: 20px;
height: 20px;
position: relative;
left:100%;
transform: translate(-100%,-100%);
/* 偽元素從右往左背景 作用虛化文本中的最后一個字讓省略號突出顯示 原文章中未添加 */
background:linear-gradient(to left,rgba(255,255,255,1),rgba(255,255,255,.8));
}
</style>
<body>
<p class="demo"><span class="text">這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本</span></p>
</body>
image.png
缺點 : '...' 位置不準確 會存在誤差
