溢出:
overflow:visible/hidden/scroll/auto/inherit;
visible:默認(rèn)值、不剪切。
hidden:超出部分剪切、沒有滾動(dòng)條。
scroll:超出部分有滾動(dòng)條。
auto:自適應(yīng),有滾動(dòng)條。
inherit:繼承父元素的overflow得值。
空余空間:
white-space:pre/pre-wrap/nowrap/pre-line/inherit;
pre:識(shí)別回車和空格、不換行。
pre-wrap:識(shí)別回車和空格、換行。
nowrap:不識(shí)別回車和空格、不換行。
pre-line:識(shí)別回車、不識(shí)別空格、識(shí)別換行。
inherit:繼承父元素的white-space屬性。
實(shí)例:
(1)單行實(shí)現(xiàn)省略號(hào):
width:valve;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipse;
(2)
可以不要設(shè)置高 自適應(yīng) 別忘了overflow:hidden;
.box{
width: 100%;
// height: .70rem;
// line-height: .36rem;
margin: .2rem 0 .4rem;
font-size: .28rem;
overflow: hidden;
}
//超出部分隱藏(可設(shè)置多行之后省略號(hào))
//兩行超出隱藏
.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;
}
?