在开发网页时,我们常常需要在一定的宽度下显示一行或者几行文本。但是,某些时候这个文本的内容可能会非常长,而且过长的文本有时候又不够美观。因此CSS提供了两行以上显示省略号的属性。overflow: h
在开发网页时,我们常常需要在一定的宽度下显示一行或者几行文本。但是,某些时候这个文本的内容可能会非常长,而且过长的文本有时候又不够美观。因此CSS提供了两行以上显示省略号的属性。
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;属性表示当文本超出容器宽度时,隐藏多余的文本。text-overflow: ellipsis;用于在文本溢出容器时在文本末尾显示省略号。display: -webkit-box;将对象作为弹性伸缩盒子模型显示(类似 display:flex)。-webkit-line-clamp: 2;表示用两行来显示文本,超出的部分将被省略。-webkit-box-orient: vertical;属性表示盒子内的子元素按垂直方向排列。
overflow: hidden;
text-overflow: ellipsis;
display: block;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
上面的代码中,我们也可以使用display: block;替代display: -webkit-box;,但是这种方法只能实现单行文本的省略。而使用display: -webkit-box;可以实现多行文本的省略。
除了使用-webkit-line-clamp来限制文本行数以外,也可以使用max-height来达到同样的效果。比如:
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
max-height: 84px;
}
在这个例子中,我们设置了max-height为84px。当文本框高度超过这个值时,会自动省略掉多余的文本。这种方法也可以达到多行省略的效果。
在使用这些属性时,一定要注意浏览器的兼容性,不同浏览器有不同的前缀。
粉丝
0
关注
0
收藏
0