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

最新推荐文章于 2024-10-09 12:38:59 发布

第10086个小白

最新推荐文章于 2024-10-09 12:38:59 发布

阅读量933

点赞数 26

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_71893790/article/details/134941833

版权

本文详细介绍了如何使用CSS实现单行文本溢出时显示省略号并保持不换行，以及如何处理多行文本溢出，通过`white-space`,`overflow`,`text-overflow`属性配合`-webkit-box`和`-webkit-line-clamp`属性来达到效果。

摘要由CSDN通过智能技术生成

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