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

2023-12-13 06:19:30

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

在这里插入图片描述
到这里也就结束了,希望对您有所帮助。
在这里插入图片描述

文章来源:https://blog.csdn.net/weixin_71893790/article/details/134941833
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。