css限制一行显示，溢出隐藏，并省略号显示

爱吃烧鸭蛋的叶安

已于 2022-08-09 10:47:55 修改

阅读量987

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css html 前端

于 2022-08-09 10:47:29 首次发布

13 篇文章

订阅专栏

本文介绍如何使用CSS实现文本的一行显示并超出部分用省略号替代的效果。具体做法包括设置元素的宽高限制，使用overflow:hidden;隐藏溢出内容，text-overflow:ellipsis;使超出部分显示为省略号，white-space:nowrap;防止文字换行。

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

实现文字一行显示，超出省略号显示
实现规则：限制宽高，然后再添加下面三行代码即可
在这里插入图片描述

		overflow: hidden;//溢出隐藏
      text-overflow: ellipsis;//超出省略号显示
      white-space: nowrap;//文字不换行