WordPress课程广告

CSS设置文本超出隐藏,并显示省略号

释放双眼,带上耳机,听听看~!

CSS设置文本超出隐藏,并显示省略号可以使用overflow:hidden将超出部分隐藏,然后使用text-overflow:ellipsis设置文本对象溢出是显示为省略号。下面是可以直接使用的样式代码分享,分别提供了超出一行和多行的样式代码示例:

样式代码:

可以直接使用,给需要设置超出隐藏的文本或者标题直接添加上如下样式即可。

超出一行,隐藏文本并显示省略号

//超出一行省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

超出两行甚至多行,隐藏文本并显示省略号

//超出2行隐藏显示省略号示例
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
//假设是需要超出三行隐藏,则修改-webkit-line-clamp和line-clamp属性对应的值,将上述的2修改为3。

相关文章

网上还有一些更加详细的相关介绍文章,感兴趣的可以自己看看:

CSS -webkit-box-orient: vertical 属性编译后丢失问题详解_继续向前~的博客-CSDN博客

ss控制文本两行显示-超出省略号表示-CSDN博客

给TA打赏
共{{data.count}}人
人已打赏
前端笔记

CSS控制内容仅在PC显示,移动隐藏

2022-7-28 21:55:57

SEO技巧前端笔记

JavaScript判断搜索引擎蜘蛛访问屏蔽或跳转特定内容代码

2023-5-1 10:35:22

WordPress网站建设宣传图片
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
展开目录