關于多行溢出顯示省略号的問題，如果是根據字元的長度個數限制 超過部分替換為省略号，這種還是很好處理的，關鍵是根據行數，在未知情況下你不知道需要多少内容，去填滿一個元素，做起來還是比較麻煩的，網上很多種亂七八糟的方案，拿過來又不能直接用，，我就結合網上的思路重新整理修改一波可以直接用的幾種方案。
一、單行溢出出現省略号顯示：
張藝興張藝興張藝興張藝興張藝興
樣式：
.p{
width:1rem;
overflow:hidden;//超出部分隐藏
white-space:nowrap;//禁止換行
text-overflow:ellipsis//省略号
}
複制代碼
圖：
二、多行溢出出現省略号(css方案)：
這樣方案簡單易懂，但是存在相容性，隻适用于在webkit浏覽器或者移動端。
小綿羊小綿羊小綿羊小綿羊小綿羊小綿羊
樣式：
.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方案)：
按鈕
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";
}
}
}
}
複制代碼
結果圖：
使用js實作不太容易了解，目前最靠譜，方法封裝好，靈活使用，可根據各自的需要通過傳參數滿足各自的需要。
新增點選可展開功能及代碼：
moreline(id,rows,str){
var boxid = document.getElementById(id);
var computedStyle = document.defaultView.getComputedStyle(boxid,null);
var lineHeight = computedStyle.lineHeight;
var top = (rows+1)*parseInt(lineHeight);
var tempstr = str;
boxid.innerHTML = tempstr;
var len = tempstr.length;
var i = 0;
if(boxid.offsetHeight>top){
var temp = "";
boxid.innerHTML = temp;
while(boxid.offsetHeight<=top){
temp = tempstr.substring(0,i+1);
i++;
boxid.innerHTML = temp;
}
tempstr = temp.substring(0,temp.length-1);
len = tempstr.length;
boxid.innerHTML = tempstr.substring(0,len-3)+"..."+`展開`;
boxid.height = top+"rem";
let en = document.querySelector(".a")
en.onclick = function(){
boxid.innerHTML = str;
}
}
}
複制代碼
效果圖：
點選展開：
作者：一直在路上的小仙女
連結：juejin.cn/post/692135…
來源：掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。