css两行省略号xief

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

CSS是一种用于网页样式设计的语言,能够使我们的网页变得更加美观和易于阅读。其中,省略号是一种经常使用的样式特效。在CSS中,有两种方法可以实现两行省略号。 p { overflow: hidden;

CSS是一种用于网页样式设计的语言,能够使我们的网页变得更加美观和易于阅读。其中,省略号是一种经常使用的样式特效。在CSS中,有两种方法可以实现两行省略号。

 p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  } 

以上的代码使用了CSS3中的-webkit-box属性,设置了一个只显示两行的容器,并将溢出部分隐藏。同时,也可以使用text-overflow属性来实现同样的效果。

 p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  } 

这种方法跟第一种方法类似,只是多了一个text-overflow属性,它的值为ellipsis,表示超出部分用省略号代替。

综上所述,以上两种方法都可以实现文本的两行省略号效果,具体使用方法根据实际需要选择。

文章说明:

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

题图来自Unsplash,基于CC0协议

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

评论列表 评论
发布评论

评论: css两行省略号xief

粉丝

0

关注

0

收藏

0

已有0次打赏