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

原创于 2020-08-23 22:23:00 发布 · 117 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3 #html5 #前端

HTML/CSS 专栏收录该内容

30 篇文章

订阅专栏

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

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

解决方法

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

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

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

解决方法

属性解释