文本溢出（WXSS)

最新推荐文章于 2022-11-02 15:14:17 发布

Rock.Yao

最新推荐文章于 2022-11-02 15:14:17 发布

阅读量426

点赞数 1

分类专栏：笔记文章标签： css html

本文链接：https://blog.csdn.net/CSDNhaoheng/article/details/122953314

版权

笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文介绍了CSS中用于处理文本溢出的两种方法：单行文本使用`white-space: nowrap; overflow:hidden; text-overflow:ellipsis;`实现隐藏并显示省略号；多行文本则通过`-webkit-line-clamp`属性限制显示的行数，结合`overflow`和`text-overflow`达到相同效果。这些技巧在网页布局和响应式设计中十分常用。

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

1、单行文本溢出隐藏省略号代替

.div{
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
}

2、多行文本溢出隐藏省略号代替

.div{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;/*设置对其格式*/
  -webkit-line-clamp:2;/*设置多行行数*/
}