CSS的一行溢出隐藏是一种很常用的样式技巧。它可以让长文本不会撑破页面容器,同时也能够保持文本内容的完整性。在编写CSS中,使用white-space: nowrap; overflow: hidde
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;属性才能生效。
粉丝
0
关注
0
收藏
0