实现文本超过两行时显示省略号（...）的效果 css

最新推荐文章于 2025-11-06 10:49:46 发布
原创 最新推荐文章于 2025-11-06 10:49:46 发布 · 508 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端 #javascript

这篇文章介绍了如何在CSS中使用`overflow`,`-webkit-line-clamp`,和`-webkit-box-orient`属性来控制文本内容在有限空间内的垂直显示，实现文本的自动截断效果。 
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 设置最大显示行数 */
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;

将文本的类名 添加这几个属性即可

李妮嘎_
关注
CSS实现文本超过部分，超出两行，超出部分省略号显示...
CC酱写前端的博客
03-03 894
文字超过部分显示为省略号 <style> .p{ width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } </style> <body> <p class="p"> 我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一
CSS文本超出2行就隐藏并且显示省略号
01-19
超出一行隐藏: overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？ 超出两行隐藏: css3解决了这个问题，解决方法如下： display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。 -webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） -webkit-line-clamp:2; //这个属性不是css的规范属性，需要组
css 文本显示两行超过显示省略号
最新发布
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
11-06 698
适用于现代浏览器兼容性：Chrome、Safari、Edge、Firefox备注：最简单最推荐max-height ＋ ::after伪元素兼容旧版浏览器，如IE、旧版Firefox兼容性：所有浏览器备注：需要手动调整max-height。
css 超过一行/多行显示省略号... - 附示例
m0_48968874的博客
12-22 4232
效果。
css文本超出2行显示...
09-16 1万+
上述代码中，-webkit-line-clamp属性设置为2表示最多显示2行文本，-webkit-box-orient属性设置为vertical表示文本垂直排列。使用CSS的overflow属性来将文本溢出部分隐藏，同时使用white-space属性来设置文本换行方式为normal或者nowrap。使用CSS的text-overflow属性来设置文本超过2行后显示省略号。可以使用CSS的text-overflow和ellipsis属性来实现文本超过2行时显示省略号。
css---实现文本超过两行时显示省略号（...）的效果
zyue_1217的博客
07-26 1万+
如果需要兼容其他浏览器，可以考虑使用JavaScript或其他CSS技术来实现类似的效果。，我们将容器元素设置为仅显示两行文本。当文本超过两行时，将隐藏溢出部分，并通过。是一个非标准的CSS属性，仅在WebKit浏览器上有效。是包裹文本内容的容器元素的类名。
判断文字超过2行添加展开按钮，未超过则不显示，溢出部分显示省略号
10-17
总之，实现“判断文字超过2行添加展开按钮，未超过则不显示，溢出部分显示省略号”的功能，需要结合CSS的溢出省略策略与JavaScript的动态交互处理。通过这样的方式，我们可以为用户提供更好的阅读体验，同时保持界面...
CSS实现文字多行省略效果.zip_朋友圈文字最后变成省略号
01-08
当我们需要展示大量文本但受限于有限的空间时，可以利用CSS来实现文字的多行省略效果，让超出部分以省略号（...）的形式呈现。在给定的“CSS实现多行文字显示省略号效果.zip”压缩包中，包含了一个名为“2.css”的...
CSS控制文本超出指定宽度显示省略号和文本不换行效果的实现
09-24
在本篇文档中，我们将深入学习如何使用CSS控制文本的显示方式，具体来说是如何实现当文本超出指定宽度时，在文本的末尾显示省略号，并且文本不换行。这种效果在网页设计中非常常见，它能够帮助我们优雅地处理那些...
CSS文本超过2行省略号（...）显示
狂野的心跳的博客
10-16 8051
基础属性：（只能做到超出一行部分省略号显示） width: 200px; //宽度 overflow: hidden; //超出文本隐藏 white-space: nowrap; //不换行，只显示一行 text-overflow: ellipsis; //超出部分省略号显示 CSS3属性：（可做到超出 N 行部分省略号显示，行数可自定义） width: 200px; /...
CSS文本设置超出2行显示省略号...
weixin_42464716的博客
01-09 6173
【代码】CSS文本设置超出2行显示省略号...
CSS文本设置超出2行显示省略号
热门推荐
老电影故事的博客
06-10 6万+
如图所示，当居住地址字段太长超过2行时就显示 （…） 2、强制2行或多行就要用到CSS3
css超过两行显示为..._使用这些不太常用的CSS属性，布局效率上又提高了一个层次...
weixin_42304604的博客
01-10 346
有很多CSS属性，有些人不了解，或者他们了解它们，但是忘记在需要时使用它们。其实，有时候我们用 JavaScript 来实某些交互，CSS 一个属性就能搞定了，这可以大大节约我们编码的时间。作为前端开发人员，我们经常会遇到这样的事情。所以我问自己，为什么不搞篇文章列出所有那些较少使用但既有用又有趣的 CSS 属性？在本文中，我将介绍一些不一样的CSS属性，希望能给你带来点新鲜感，废话不多说，让我们...
这6种组织CSS的方式，可以帮助你解决CSS扩展维护难的问题
web前端开发
12-26 340
译者| 池盛星译文 |https://zhuanlan.zhihu.com/p/28085207作者 |Inessa Brown,原文 |https://css-tricks.c...
css实现超过两行用...表示
Zmikoo学习之路
04-10 3819
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
CSS：文字超出两行以...显示
Var_YanGuangYing
11-28 1565
overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;（行数） -webkit-box-orient: vertical;
CSS：2行文字时正常显示，超过2行显示更多
Dy大叔的日常
05-10 1662
在做页面时，ui有一个这样的需求，当描述中不超过2行文字时，则正常显示在页面上，超过2行的时候，显示更多
css文本限制最多两行，超出后显示 “...”
奔跑的牛
06-15 1万+
css文本限制最多两行，超出后显示 “...”
前端css 文本溢出超过两行显示省略号
07-22
在前端开发中，使用CSS实现多行文本溢出显示省略号（超过两行）可以通过弹性盒子（Flexbox）布局结合特定的属性来实现。这种方式可以有效地控制文本在容器中的显示方式，并在超出指定行数时显示省略号。 要实现这一效果，需要使用以下关键CSS属性： - `display: -webkit-box`：将容器设置为弹性盒子布局，以便更好地控制子元素的排列方式。 - `-webkit-line-clamp: 2`：限制文本显示的最大行数，在这个例子中为2行。 - `-webkit-box-orient: vertical`：确保文本内容垂直排列。 - `overflow: hidden`：隐藏超出容器的内容。 - `text-overflow: ellipsis`：在文本溢出容器时显示省略号。 以下是一个具体的实现示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>多行文本溢出</title> <style> .multi-line { width: 200px; height: 50px; background-color: #f0f0f0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } </style> </head> <body> <div class="multi-line"> 这是一段非常长的文本，如果文本内容超过了这个容器的高度，它会显示省略号。这是第二行的内容，如果继续添加更多文字，仍然只会显示两行，其余内容将被隐藏并用省略号表示。 </div> </body> </html> ``` 在上述代码中，`.multi-line` 类定义了一个容器，其宽度设置为 `200px`，高度设置为 `50px`，确保文本内容不会超出这个范围。`-webkit-line-clamp: 2` 是关键属性，它限制了文本显示的最大行数为2行。`-webkit-box-orient: vertical` 确保文本内容垂直排列，而 `text-overflow: ellipsis` 则确保在文本超出容器时显示省略号[^4]。 此外，需要注意的是，这种方法依赖于 `-webkit` 前缀的属性，这意味着在非WebKit浏览器（如Firefox或IE）中可能需要额外的兼容性处理。虽然现代浏览器普遍支持这些属性，但在一些旧版本的浏览器中可能会出现不兼容的情况。因此，在实际项目中，建议测试不同浏览器下的表现，并根据需要进行调整。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值