溢出:
overflow:visible/hidden/scroll/auto/inherit;
visible:默认值、不剪切。
hidden:超出部分剪切、没有滚动条。
scroll:超出部分有滚动条。
auto:自适应,有滚动条。
inherit:继承父元素的overflow得值。
空余空间:
white-space:pre/pre-wrap/nowrap/pre-line/inherit;
pre:识别回车和空格、不换行。
pre-wrap:识别回车和空格、换行。
nowrap:不识别回车和空格、不换行。
pre-line:识别回车、不识别空格、识别换行。
inherit:继承父元素的white-space属性。
实例:
(1)单行实现省略号:
width:valve; white-space:nowrap; overflow:hidden; text-overflow:ellipse;
(2)
可以不要设置高 自适应 别忘了overflow:hidden;
.box{ width: 100%; // height: .70rem; // line-height: .36rem; margin: .2rem 0 .4rem; font-size: .28rem; overflow: hidden; }
//超出部分隐藏(可设置多行之后省略号)
//两行超出隐藏 .overhide { display: -webkit-box !important; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } //一行超出隐藏 .overhideline1 { display: -webkit-box !important; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
时间: 2024-10-13 00:29:11