css实现单行溢出隐藏以及多行溢出隐藏
单行溢出隐藏
//首先我们设置一个div盒子 <div class="texthidden">我是csdn博主第10086个小白。我是csdn博主第10086个小白。我是csdn博主第10086个小白。我是csdn博主第10086个小白。</div>
//在css文件中写入以下代码 .texthidden text { /* 单行文本溢出省略号代替 */ /* 不换行 */ white-space: nowrap; /* 内容隐藏 */ overflow: hidden; /* 省略号代替 */ text-overflow: ellipsis; /* overflow隐藏只对块级元素进行作用,所以需要将行内元素转成块级元素 */ display: block; }
实现效果如下
以下是多行文本省略的代码以及效果图
.texthidden text { /* 多行文本溢出省略号代替 */ /* 浏览器厂商前缀,webkit内核 */ display: -webkit-box; /* 内容隐藏 */ overflow: hidden; /* 省略号代替 */ text-overflow: ellipsis; /* 对齐的方向 */ -webkit-box-orient: vertical; /* 行数 */ -webkit-line-clamp: 2; }
到这里也就结束了,希望对您有所帮助。