【CSS】文本不换行并且对溢出文本进行处理（常用但经常搞忘的）

努力挣钱的小鑫

于 2020-08-23 22:23:00 发布

阅读量99

点赞数

分类专栏： HTML/CSS 文章标签： css html css3 html5 前端

本文链接：https://blog.csdn.net/IAIPython/article/details/130571178

版权

HTML/CSS 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一种利用CSS属性white-space、text-overflow和overflow:hidden来处理文本溢出的方法，确保网页布局美观且文本显示合理。通过设置white-space:nowrap防止文本换行，text-overflow:ellipsis显示省略号代替溢出文本，以及overflow:hidden隐藏超出部分。

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

当我们的文本过多的时候，会导致文字换行，页面布局不是很美观，这时候需要我们进行不换行，只显示一行，并且对文字进行处理。

解决方法

使用 white-space 、text-overflow 和 overflow: hidden 属性配合

/* 文本不会换行 */
white-space: nowrap;
/* 显示省略符号来代表被修建的文本 */
text-overflow: ellipsis;
overflow: hidden;

【CSS】文本不换行并且对溢出文本进行处理（常用但经常搞忘的）

解决方法

属性解释