[分享]css不让文本掉下来

在网站开发中，我们经常遇到一个问题，就是文本超出其指定容器的宽度而掉下来，这往往会破坏网站原本的布局。但这个问题却很容易通过 CSS 样式来解决。/ 使文本不掉下来 / overflow: hidde...

在网站开发中，我们经常遇到一个问题，就是文本超出其指定容器的宽度而掉下来，这往往会破坏网站原本的布局。但这个问题却很容易通过 CSS 样式来解决。

/* 使文本不掉下来 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; 

上面的 CSS 样式中，我们应该重点注意以下属性：

• overflow: hidden; 使得文本溢出后不再展示而是隐藏。
• text-overflow: ellipsis; 如果文本过长，超出容器限制之后会在尾部自动以省略号方式结束，省略号的编码是“…”，可以控制其颜色和位置。
• white-space: nowrap; 使得文本不再换行，而是在同一行上展示。

以上三个属性组合使用，可以很好的避免文本的掉下，同时保持良好的布局。

当然，还有其它的解决方式，例如使用 CSS 的 flex 布局，但以上的方式已经足以解决大部分类似的问题。所以在进行 CSS 布局时，千万不要忘记这些小技巧。