- A+
所属分类:建站
一,css\处理行数溢出隐藏,省略号.....注:此方法不兼容火狐
1、单行隐藏
.hhh{
overflow: hidden;
/*文本不换行*/
white-space: nowrap;
/*文字超出用省略号*/
text-overflow:ellipsis;
}
2、多行隐藏
.hhh{
overflow: hidden;
/*文字超出用省略号*/
text-overflow:ellipsis;
/*盒子模型*/
display:-webkit-box;
/*显示的文本行数,3行*/
-webkit-line-clamp:3;
/*子元素的垂直排列方式*/
-webkit-box-orient:vertical;
}
二、javascript方式处理
<div id="ellipsis"> 浏览器兼容伪类写法css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分 </div> <script type="text/javascript"> function mitulineHide(num,con){ var contain = document.getElementById(con); console.log(con); var maxSize = num; var txt = contain.innerHTML; if(txt.length>num){ console.log('1'); txt = txt.substring(0,num-1)+"..."; contain.innerHTML = txt; }else{ console.log("error") } }; mitulineHide(10,'ellipsis'); </script>
- 我的微信
- 这是我的微信扫一扫
-
- 我的微信公众号
- 我的微信公众号扫一扫
-