CSS文本超过2行省略号（...）显示

原创于 2019-10-16 11:07:15 发布 · 7.9k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#CSS文本超过2行省略号显示

js 专栏收录该内容

23 篇文章

订阅专栏

本文介绍如何使用CSS实现文本超出容器时以省略号显示的效果，包括单行和多行文本的处理方式，适用于网页布局中对文本长度控制的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基础属性：（只能做到超出一行部分省略号显示）

width: 200px;  //宽度

overflow: hidden;  //超出文本隐藏

white-space: nowrap;  //不换行，只显示一行

text-overflow: ellipsis;  //超出部分省略号显示

CSS3属性：（可做到超出 N 行部分省略号显示，行数可自定义）

width: 200px;  //宽度

overflow:hidden;  //超出文本隐藏

text-overflow:ellipsis;  ///超出部分省略号显示

display:-webkit-box;  //弹性盒模型

-webkit-box-orient:vertical;  //上下垂直

-webkit-line-clamp:4;  //自定义行数