css如何只显示两行，并且在第二行最后添加省略号

最新推荐文章于 2024-05-08 13:59:26 发布

原创最新推荐文章于 2024-05-08 13:59:26 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用CSS实现的文本显示效果：当文本超过两行时，自动添加省略号，确保页面布局整洁。关键CSS属性包括overflow、text-overflow、display、-webkit-line-clamp和-webkit-box-orient。

css如何只显示两行，并且在第二行最后添加省略号

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

效果图

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

青铜级前端

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CSS实现超出两行显示省略号

2301_79325339的博客

09-23

3623

在网页开发中，当文本内容过长超出容器的宽度时，我们通常会希望将多余的文本部分省略并显示省略号，以保持页面的美观和布局的完整性。你可以根据自己的需要调整相关属性的值，以适应不同的场景和要求。通过以上的CSS设置，当文本内容超过两行时，多余的文本将被隐藏，并在末尾显示省略号，从而实现了超出两行显示省略号的效果。属性将元素的显示方式设置为基于弹性盒子，以便我们可以使用弹性盒子布局的相关属性。通过在CSS中为该类设置一些属性，我们实现了超出两行显示省略号的效果。这样，当文本超过两行时，多余的文本部分将被隐藏。

超出行数...隐藏并在最后一行最后加展开按钮

wang_fu_gui_ya的博客

07-31

1466

惊！产品竟然提出这样的需求

参与评论您还未登录，请先登录后发表或查看评论

css实现文字超出省略，展开收起效果

qq_53302709的博客

07-18

3997

css实现展开收起效果，稍微修改一下适用于react，vue等框架

文字和图标并排展示，最多两行，超出范围省略号显示后跟小图标

qq_42396813的博客

12-22

2335

文字后跟小图标，文字超出范围显示省略号

web前端入门到实战：前端高手在CSS 开发效率的必备片段

前端工程师年薪30万，就靠这套教程！持续更新最新知识

04-01

357

这篇文章会记录我们平时常用到的 CSS 片段，使用这些 CSS 可以帮助我们解决许多实际项目问题中遇到的，墙裂建议点赞收藏再看，方便日后查找清除浮动浮动给我们的代码带来的麻烦，想必不需要多说，我们会用很多方式来避免这种麻烦，其中我觉得最方便也是兼容性最好的一种是，在同级目录下再创建一个；不过这样会增加很多无用的代码。此时我们用:after这个伪元素来解决浮动的问题，如果当前层级有浮动元素，那么...

yytext table html,展开label，利用YYText实现文字显示不完末尾添加全文

weixin_39674293的博客

06-10

756

效果图：操作先github下载文件导入，代码如下：#import "ViewController.h"#import "YYLabel.h"#import "NSAttributedString+YYText.h"#import @interface ViewController ()@property (nonatomic,strong) YYLabel *label;;@end@impleme...

css 文字第二行省略号,第二行的css省略号

weixin_32307987的博客

08-04

2986

工作text-overflow: ellipsis;的要求是white-space(pre，nowrap等)的单行版本。这意味着文本永远不会到达第二行。人机工程学。在纯CSS中不可能。当我刚才寻找完全相同的东西时我的来源：http：//www.quirksmode.org/css/textoverflow.html(Quirksmode ftw！)编辑如果好的CSS神将实现http://www.w...

详解：第二行末尾用省略号表示(多行末尾用省略号表示)

Joey3的博客

12-09

390

详解：第二行末尾用省略号表示(多行末尾用省略号表示)

css文字显示两行，溢出显示省略号，点击查看更多

Crazy_GirlLL的博客

04-20

1万+

效果图如下：初始化展示两行，超出显示省略号，点击查看全部，展示全部内容，点击收起，恢复初始化状态两行知识点：展示两行，用的css属性： display:-webkit-box;-webkit-box-orient:vertical; -webkit-line-clamp:2; 利用clientHeight和scrollHeight的特性比较，来判断内容是否溢出摘自：https://blog.youkuaiyun.com/qq_35430000/article/det...

判断文字超过2行添加展开按钮，未超过则不显示，溢出部分显示省略号

10-17

总之，实现“判断文字超过2行添加展开按钮，未超过则不显示，溢出部分显示省略号”的功能，需要结合CSS的溢出省略策略与JavaScript的动态交互处理。通过这样的方式，我们可以为用户提供更好的阅读体验，同时保持界面...

CSS文本超出2行就隐藏并且显示省略号

01-19

//溢出用省略号显示 white-space:nowrap; //溢出不换行但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？超出两行隐藏: css3解决了这个问题，解决方法如下： display:-webkit-box; //将对象作为...

web前端超出两行用省略号表示的实现方法

10-19

在Web前端开发中，有时我们需要对长文本进行限制，使其在特定区域内只显示两行，并在超出时使用省略号来表示剩余内容。这通常用于摘要显示、列表展示或者优化移动设备上的用户体验。本篇文章将详细讲解如何实现这一...

css 溢出显示两行显示省略号，省略号后面显示其他内容

06-19

我们有一个需求：在CSS中实现文本溢出显示为两行，并在省略号后显示其他内容（比如一个按钮或更多文字）。参考引用内容，目前CSS没有直接属性支持在文本溢出省略号后添加其他内容。但我们可以结合已有的多行省略技术...

css 多行文本溢出隐藏，并且在最后面有查看更多的按钮

qq_51985469的博客

05-08

2339

2.进行一下css 布局首先就是实现三行溢出隐藏的效果。最重要的一点button按钮一定要在最前面。4.最后把按钮通过浮动放在右下角合适的位置。3.使用伪元素在文字的后面占一个位置。然后把width设置为0。5.完成了-->完整代码。

js+css实现超过两行省略且尾部添加图标

kalinux的博客

07-06

373

超过两行省略且尾部添加图标：js判断是一行还是两行

CSS控制div显示文本第二行超出部分省略

MASK_life的博客

12-02

917

项目场景：在实际开发中经常遇到这样要求的显示，第二行超出部分省略。（直接上干货）解决方案： css样式直接控制。(这里有个注意点就是当前div最好不要设置padding属性，不然会出现一些类似的情况比如：第二行虽然省略了，但是还是能看到第三行的数据。) display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; <view ...

css 让文字在第二行超出显示省略号

weixin_46352558的博客

08-27

2190

p{ width:100px; overflow : hidden;/*必须结合的属性,当内容溢出元素框时发生的事情*/ text-overflow: ellipsis;/*可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。*/ display: -webkit-box;/*必须结合的属性，将对象作为弹性伸缩盒子模型显示。*/ -webkit-line-clamp: 2;/*用来限制在一个块元素显示的文本的行数。*/ -webkit-box-orien

css文字两行或者几行显示省略号