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

最新推荐文章于 2025-05-29 15:09:40 发布
最新推荐文章于 2025-05-29 15:09:40 发布
阅读量3.4k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 编程 文章标签： css 前端 编程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79325339/article/details/133217951
编程 专栏收录该内容
436 篇文章 ¥29.90 ¥99.00
订阅专栏
本文介绍了如何使用CSS实现当文本内容超过容器宽度两行时，隐藏多余文本并显示省略号的效果。通过组合使用`display: -webkit-box`、`-webkit-line-clamp: 2`、`-webkit-box-orient: vertical`、`overflow: hidden`和`text-overflow: ellipsis`等属性，可以轻松实现这一功能。文章还提供了一段示例代码供读者参考和实践。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在网页开发中，当文本内容过长超出容器的宽度时，我们通常会希望将多余的文本部分省略并显示省略号，以保持页面的美观和布局的完整性。本文将介绍如何使用CSS实现超出两行显示省略号的效果。

要实现该效果，我们可以使用CSS的text-overflow属性和display属性配合使用，同时设置white-space属性为nowrap，并结合使用overflow: hidden属性来控制文本的显示。

下面是一段示例代码，演示了如何实现超出两行显示省略号的效果：

<!DOCTYPE html>
<html>
<</
了解本专栏 订阅专栏 解锁全文
CSS实现文本显示两行，超出部分显示省略号（常用到）
mengmeng1_的博客
02-03 2432
<div class="option-text"> <span v-text ="item.itemValue" class='ellipsis'></span> </div> <style> .ellipsis { word-break: break-all; text-overfl...
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的规范属性，需要组
超出两行显示省略号不生效的问题
qq_36182265的博客
05-29 169
发现不生效 ，只展示了一行，并且被截断了，然后一直尝试修改，发现把display:-webkit-box注释掉之后可以显示一行省略，但是这样还是不是我想要的效果。最后我想到去掉所有样式，发现了问题所在，可能是上面样式的问题，导致了这个div就是没换行，最后加上了换行代码发现可以换行了。关键代码就是要加上white-space: normal;最新发现了一个有点头疼的问题，就是在设置文本超出两行的时候显示省略号不生效的问题，首先我的样式是这样写的。
css超过两行显示省略号
weixin_46388225的博客
08-06 3414
【代码】css超过两行显示省略号。
【css技巧】文本超出两行显示省略号
liyananweb的博客
01-10 3058
是一个WebKit浏览器的私有属性，因此它可能不被所有浏览器支持。如果需要兼容多种浏览器，你可能需要考虑使用JavaScript来实现类似的效果。属性来实现文本超出两行显示省略号的效果。
用css实现超出两行显示省略号
蜗牛~~
08-09 3809
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> *{ margin: 0; padding: 0; ...
css 文本超出2行就隐藏并且显示省略号
热门推荐
apurelotus的博客
05-26 17万+
今天做东西，遇到了这个问题，百度后总结得到了这个结果。 首先，要知道css的三条属性。 overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 这三个是css的基础属性，需要记得。 但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？
css 实现超出两行显示省略号
10-19
CSS可以通过设置文本溢出部分用省略号表示来实现超出两行显示省略号。具体实现方法如下： ``` .line { display: -webkit-box; -webkit-line-clamp: 2; /* 超出几行省略 */ -webkit-box-orient: vertical; ...
微信小程序用css实现超出两行显示省略号
最新发布
08-13
这是一段可能会超出两行的文本内容，如果超出两行将会显示省略号。 ``` #### WXSS 文件 ```css .container { width: 100%; padding: 20rpx; } .text-ellipsis { display: -webkit-box; overflow: hidden; ...
web前端超出两行用省略号表示的实现方法
10-19
总之，通过CSS的特定属性，我们可以轻松地在Web前端实现文本超出两行后使用省略号的效果。不过，为了提供最佳的用户体验和兼容性，建议结合多种技术手段进行优化。同时，持续关注新的CSS规范和技术发展，以便在未来...
文字超过两行时显示省略号-CSS样式
qq_45897045的博客
02-04 748
要在 CSS 中实现当文字超过两行时显示省略号，可以使用。属性结合使用，以及设置。
css文本两行显示，超出部分省略号显示
weixin_45606890的博客
09-01 3662
css文本两行显示，超出部分省略号显示
CSS文本设置超出2行显示省略号
老电影故事的博客
06-10 6万+
如图所示，当居住地址字段太长超过2行时就显示 （…） 2、强制2行或多行就要用到CSS3
css 实现超出两行、多行文字省略号显示
iuvc的博客
02-21 1万+
在我们日常使用文字超出省略号显示，一般使用overflow: hidden;text-overflow: ellipsis;white-space: nowrap;实现，但是当有需求需要实现两行乃至多行时，该怎么实现呢。
CSS文本超出2行隐藏并且显示省略号
xffff00的博客
01-12 514
文本超出两行隐藏并显示省略号代码如下： { overflow: hidden; text-overflow: ellipsis; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; //需要展示的行数 -webkit-box-orient: vertical; } 如果发现文本显示了两行但是未显示省略号 需要增加 /*autoprefixer:off*/ 代码...
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浏览器上有效。是包裹文本内容的容器元素的类名。
css 文本超过两行，使用...省略
iblackboy的博客
04-18 1785
【代码】css 文本超过两行，使用...省略。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值