css实现单行文本溢出以及多行文本溢出

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;
 }

到这里也就结束了，希望对您有所帮助。