1.0 單行文本溢出（頁面中多余的文本仍然存在 只是顯示的時(shí)候用戶的角度溢出的部分文本是省略號(hào)代替的）
<style>
.text{
width : 500px;
height: 50px;
line-height : 50px;
/* 單行文本溢出的省略號(hào)的關(guān)鍵性代碼*/
over-flow :hidden;
white-space : nowrap ;
text-overflow :ellipsis ;
}
</style>
<body>
<p class="text">這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本</p>
</body>
image.png
2.0 多行文本溢出 (按行數(shù))
- 純Css 實(shí)現(xiàn)（頁面中多余的文本仍然存在 只是顯示的時(shí)候用戶的角度溢出的部分文本是省略號(hào)代替的）
- -webkit-line-clamp: 2；（用來限制在一個(gè)塊元素顯示的文本的行數(shù)，2 表示最多顯示 2 行。為了實(shí)現(xiàn)該效果，它需要組合其他的 WebKit 屬性）;
- display: -webkit-box；（和 1 結(jié)合使用，將對象作為彈性伸縮盒子模型顯示 ）；
- webkit-box-orient: vertical；（和 1 結(jié)合使用 ，設(shè)置或檢索伸縮盒對象的子元素的排列方式 ）；
- overflow: hidden；（文本溢出限定的寬度就隱藏內(nèi)容）；
- text-overflow: ellipsis；（多行文本的情況下，用省略號(hào) “…” 隱藏溢出范圍的文本)；
<style>
.demo{
width:500px;
/* 不要設(shè)置高度高度會(huì)由內(nèi)容撐開 */
-webkit-line-clamp: 3;
display: -webkit-box;
/*不設(shè)置高度 這個(gè)屬性不要忘記設(shè)置哦 不然...不生效*/
-webkit-box-orient: vertical;
overflow: hidden;
/*text-overflow: ellipsis 可以不用設(shè)置 其他幾個(gè)屬性必須設(shè)置*/
/*text-overflow: ellipsis; */
}
</style>
<body>
<p class="demo">這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本這是一段很長的測試文本</p>
</body>
image.png
2.js 實(shí)現(xiàn) ；（頁面中多余的文本已經(jīng)不存在 多余的文本截掉用省略號(hào)代替）
<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 ; //----> 文本的個(gè)數(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 )) ; //----> 一行可以顯示多少個(gè)字符（純文本 若不是純文本會(huì)存在誤差）
const strNum = num*lineNum；
const lastIndex = strNum - totalNum ; //--->可以理解為 需要截掉的字符的個(gè)數(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 溢出隱藏 沒有省略號(hào) ;（頁面中多余的文本仍然存在 只是給隱藏了用戶看不到）
<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 偽元素+定位實(shí)現(xiàn)多行省略
適用場景 ： 適用于對省略效果要求較低，文本一定會(huì)溢出元素的 情況；
缺點(diǎn) :
-無法識(shí)別文字的長度，無論文本是否溢出 都會(huì)顯示省略號(hào) ;
-省略號(hào)顯示可能不會(huì)剛剛好，有時(shí)會(huì)遮住一半文字
<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 實(shí)現(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%);
/* 偽元素從右往左背景 作用虛化文本中的最后一個(gè)字讓省略號(hào)突出顯示 原文章中未添加 */
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
缺點(diǎn) : '...' 位置不準(zhǔn)確 會(huì)存在誤差
