css两行省略号怎么打出来的

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

在前端开发中,我们常常会遇到需要省略长文本的情况,而CSS中提供了两种方式可以实现省略号的效果。/* 第一种方式:单行文本省略号 */ text-overflow:ellipsis; white-sp

在前端开发中,我们常常会遇到需要省略长文本的情况,而CSS中提供了两种方式可以实现省略号的效果。

/* 第一种方式:单行文本省略号 */
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;

/* 第二种方式:多行文本省略号 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden; 

第一种方式适用于单行文本,通过设置文本溢出时的表现形式为省略号,同时设置文本不能换行以及整个文本容器的溢出部分被隐藏来达到省略的效果。

第二种方式适用于多行文本,采用Flexbox的方式,将文本放在一个纵向的线性布局容器中,通过设置容器的行数上限来达到省略的效果,同时为了防止文本溢出容器的高度,使用overflow:hidden来隐藏溢出部分。

以上两种方式是实现文本省略号效果中最常用的方式,掌握这两种方式可以方便开发者在实际工作中应用。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css两行省略号怎么打出来的

粉丝

0

关注

0

收藏

0

已有0次打赏