在做项目时,很多时候文本内容未超出我们想让它显示的内容,这个时候,就需要把超出的范围隐藏起来
/*****单行文本超出隐藏并显示省略号*****/
.element{
width: 20em;/*不允许出现半汉字截断*/
overflow: hidden; /*自动隐藏文字*/
text-overflow: ellipsis;/*文字隐藏后添加省略号*/
white-space: nowrap;/*强制不换行*/
}
/***多行文字隐藏加省略号***/
.element{
width: 20em;
height: 3em;/*注意高度和宽度,不允许出现半汉字截断*/
line-height: 1.5em;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
/*************************/
}