1.在表格中的td,實(shí)現(xiàn)文字溢出省略
table{width:100%;table-layout:fixed;/* 只有定義了表格的布局算法為fixed,下面td的定義才能起作用吕漂。 */}
td{
width:100%;//自己調(diào)整
word-break:keep-all;/* 不換行 */
white-space:nowrap;/* 不換行 */
overflow:hidden;
text-overflow:ellipsis;
}
2.單行超出隱藏
div{
overflow:hidden; //超出的文本隱藏
text-overflow:ellipsis; //用省略號(hào)顯示
white-space:nowrap; //不換行
}
3.多行超出省略
- display:-webkit-box; //將對象作為彈性伸縮盒子模型顯示膝藕。
div{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
4.腳本控制
window.onload = function(){
var text = document.getElementsByClassName('ellipsis');
for(var i=0;i<text.length;i++){
str = text[i].innerHTML;
textLeng = 8;
if(str.length > textLeng ){
text[i] .innerHTML = str.substring(0,textLeng )+"...";
}
}
}
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者