關于多行溢位顯示省略號的問題，如果是根據字符的長度個數限制 超過部分替換為省略號，這種還是很好處理的，關鍵是根據行數，在未知情況下你不知道需要多少內容，去填滿一個元素，做起來還是比較麻煩的，網上很多種亂七八糟的方案，拿過來又不能直接用，，我就結合網上的思路重新整理修改一波可以直接用的幾種方案，
一、單行溢位出現省略號顯示：
<div class="p">張藝興張藝興張藝興張藝興張藝興</div>
樣式：
.p{
width:1rem;
overflow:hidden;//超出部分隱藏
white-space:nowrap;//禁止換行
text-overflow:ellipsis//省略號
}
圖：
二、多行溢位出現省略號（css方案）：
這樣方案簡單易懂，但是存在兼容性，只適用于在webkit瀏覽器或者移動端，
<div class="p">小綿羊小綿羊小綿羊小綿羊小綿羊小綿羊</div>
樣式：
.p{
width:1rem;
height:0.4rem;//需要設定高度
//必須結合的屬性，將物件作為彈性伸縮盒物件的子元素的排列仿古式
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
-webkit-line-clamp:2;//例如超過2行顯示省略號
overflow:hidden;
}
注意：這種用css解決的方案存在兼容性問題，這里提一個小捷徑，如果你使用css出現了兼容問題，可以嘗試下把樣式寫在行內，可能會解決兼容哦，（沒有絕對性，只是經驗，，，，哈哈）
那么有沒有完美的方案，也不存在兼容的方案呢？強大的js可以解決，只不過有點難，但是比較保險的，，，，
三、多行溢位出現省略號（js方案）：
<template>
<div class="box">
<textarea id="" rows="10" v-model="val"></textarea>
<div id="boxid" class="text" v-text="val" ></div>
<button @click="btn">按鈕</button>
</div>
</template>
<script>
export default {
data(){
return {val:""}
},
methods:{
btn(){
//引數1 元素id 引數2 要限制的行數 引數3 輸入的值
this.moreline('boxid',3,this.val)//傳3表示超過3行時省略號顯示，
},
moreline(id,rows,str){
var boxid = document.getElementById(id);
var computedStyle = document.defaultView.getComputedStyle(boxid,null);
var lineHeight = computedStyle.lineHeight;
var top = rows*parseInt(lineHeight);
var tempstr = str;
boxid.innerHTML = tempstr;
var len = tempstr.length;
var i = 0;
if(boxid.offsetHeight<=top){
}else{
var temp = "";
boxid.innerHTML = temp;
while(boxid.offsetHeight<=top){
temp = tempstr.substring(0,i+1);
i++;
boxid.innerHTML = temp;
}
var slen = temp.length;
tempstr = temp.substring(0,slen-1);
len = tempstr.length;
boxid.innerHTML = tempstr.substring(0,len-1)+"...";
boxid.height = top+"rem";
}
}
}
}
</script>
結果圖：
使用js實作不太容易理解，目前最靠譜，方法封裝好，靈活使用，可根據各自的需要通過傳引數滿足各自的需要，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/248113.html
標籤：其他
下一篇：HTML5知識點總結（四）