好记性不如烂笔头,又遇见了还是没想起来,还是记下吧。说不定还能用到。
单行文本溢出
假如一个盒子 width: 100px;而其中的文字过多,超出了盒子宽度,如图。则需要隐藏多余文字。
我们想要的如图所示的效果
但现在在设置了盒子宽度 width: 100px;显示的是这样。此时只需添加一些css样式即可。
需要给盒子添加的样式为:
.test1 {
width: 100px;
display: block;
/* 超出宽度部分不换行*/
white-space: nowrap;
/* 超出隐藏*/
overflow: hidden;
/*使用省略号代替*/
text-overflow: ellipsis;
}
多行文本溢出
对于多行文本,我们需要的是这样的
然而它现在是这样的
这是也只只需要给盒子添加一些css即可,需要注意的是不要给盒子设置高度。
.test2 {
width: 100px;
/*使用省略号代替*/
text-overflow: ellipsis;
/* 超出隐藏*/
overflow: hidden;
display: -webkit-box;
/*对齐模式,纵向对齐*/
-webkit-box-orient: vertical;
/*行数*/
-webkit-line-clamp: 3;
}