css一行溢出隐藏

CSS的一行溢出隐藏是一种很常用的样式技巧。它可以让长文本不会撑破页面容器，同时也能够保持文本内容的完整性。在编写CSS中，使用white-space: nowrap; overflow: hidden; text-overflow: ellipsis;这一行代码，可以实现一行溢出隐藏的效果。

其中，white-space: nowrap;属性让文本不会换行，overflow: hidden;属性让超出容器范围的内容不可见，text-overflow: ellipsis;属性则是在溢出时显示省略号。

.overflow-hidden {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

上面的CSS代码可以应用到任何带有长文本内容的元素中，比如<p>标签、<h1>标签等等。只需要给该元素添加class="overflow-hidden"即可实现一行溢出隐藏。

需要注意的是，该样式只对块级元素有效。对于内联元素，需要添加display: block;或display: inline-block;属性才能生效。