问题:
在我们定义一个div或其它盒子时,往里面写文本,往往文字太多会溢出,如下所示:
红色部分是我定义的一个有长宽的div盒子,但是显然还是太小,多余的文本溢出了。
解决:
1.单行文本溢出显示“…”:
.yc{
width: 500px;
height: 100px;
background-color: rgb(226, 187, 187);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
注意 :
white-space: nowrap;表示强制文本一行显示;
overflow: hidden; 表示超出部分隐藏;
text-overflow: ellipsis; 表示多的文本省略号显示;
效果:
2.多行文本溢出显示“…”:
.yc{
width: 500px;
height: 100px;
background-color: rgb(226, 187, 187);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
overflow: hidden;
}
注意: -webkit-line-clamp: 5; 表示第几行后显示省略号;
效果:
注意:我们把盒子宽度设置成大致能显示几行,然后设置后面的内容变成省略号就可。有些浏览器可能不兼容。
总结:
嘻嘻嘻~~