多余的字体变为省略号

最新推荐文章于 2025-04-04 15:37:15 发布

一只小 Ziyi.

最新推荐文章于 2025-04-04 15:37:15 发布

阅读量277

点赞数

分类专栏： CSS 文章标签： css3 css html

本文链接：https://blog.youkuaiyun.com/mai0824/article/details/122960571

版权

CSS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了CSS中实现一行和两行文本省略的技巧，通过设置`white-space`, `text-overflow`, `overflow`等属性，帮助你在网页布局中优雅地处理长文本显示问题。适用于前端开发中的内容展示和用户体验优化。

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

//设置样式时，请注意一下你的元素是否有宽度
	//一行
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    //两行
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;