文本过长省略

最新推荐文章于 2023-02-06 11:38:35 发布

贫穷依然存在.

最新推荐文章于 2023-02-06 11:38:35 发布

阅读量143

点赞数

文章标签： css html html5

本文链接：https://blog.youkuaiyun.com/weixin_49095220/article/details/120503330

版权

本文介绍了如何使用CSS实现单行和多行文本溢出时显示省略号的效果，通过`text-overflow:ellipsis`、`white-space:nowrap`和`overflow:hidden`等属性来控制文本显示，确保内容在有限的空间内得到合理展示。

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

<div title="我是代码大师" style="width:200px;white-space: nowrap;text-overflow:ellipsis; overflow:hidden;">我是...</div>

单行文本（方法一）：


text-overflow:ellipsis;/*当对象内文本溢出时显示省略标记（...）; clip 不显示省略标记,是简单的裁切*/
white-space: nowrap;/*设置不换行*/
overflow: hidden; /*设置隐藏*/
text-overflow: ellipsis; /*设置隐藏部分为省略号*/
/*内容过长显示成省略号（内容显示为一行）*/

//如果不生效
display:block

多行

           /* 内容过长显示两行，多余为省略号 */
           text-overflow:ellipsis;/*设置隐藏部分为省略号*/
           overflow: hidden;/*设置隐藏*/
           display: -webkit-box;
           -webkit-line-clamp: 2;/*设置显示行数，此处为2行，可设置其他数字*/
           -webkit-box-orient: vertical;