css 文本超出显示省略号不起作用

最新推荐文章于 2025-05-29 15:09:40 发布
最新推荐文章于 2025-05-29 15:09:40 发布
阅读量5k 收藏 4
点赞数 6
CC 4.0 BY-SA版权
分类专栏： 前端 小程序 文章标签： html css html5 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/clli_Chain/article/details/107375225
本文介绍如何使用CSS实现单行或多行文本溢出时显示省略号的效果，解决在Flex布局下直接设置不起作用的问题，并提供具体代码示例。

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

一、单行文本显示省略号

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

二、多行文本显示省略号

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
//基于webkit内核，基本够用  当然前提是手机端

然后我们现在了遇到这样一个问题

首先在一个view中 设置了display:flex;属性之后就会不起作用
这个时候我们不能给设置flex标签的子标签直接设置对应的文本超出显示省略号

我们应该在子标签中在嵌套一个text标签，这样就可以解决这个问题

<view> //flex父标签
<view>文本文本文本文本文本文本文本文本</view> //flex 子标签
<view>文本文本文本文本文本文本文本文本</view> //如果直接设置会不起作用
<view><text>文本文本文本文本文本文本</text></view> //这个时候我们可以在view标签中在嵌套一个text标签
</view>
css实现文本超出显示省略号
风中追风
04-13 995
【代码】css实现文本超出显示省略号。
CSS 文本超出隐藏，并显示省略号
热门推荐
weixin_48596030的博客
10-28 3万+
CSS 文本超出隐藏，并显示省略号
Flex布局下文本溢出省略号失效了，Flex自适应宽度显示省略号
smouns_的博客
05-10 3557
Flex布局下文本溢出省略号失效了，Flex自适应宽度显示省略号
关于一行文字超出显示省略号不生效的问题!~最新版谷歌(61.0以上版本)问题
lijie627239856的博客
10-26 5259
关于文字超出隐藏,显示省略号,. (适用谷歌最新版本,60.0以上的, 目前我的版本是61.0..... 之前的老版本没有这种情况正常设置就可以!) 正常情况如下,就没有问题了给父元素设置好 父元素前提要设置width就不做叙述了!这个是前提条件 /*超出隐藏*/ overflow: hidden; text-overflow: ellipsis; white-space: nowra
超出两行显示省略号不生效的问题
最新发布
qq_36182265的博客
05-29 152
发现不生效 ，只展示了一行，并且被截断了，然后一直尝试修改，发现把display:-webkit-box注释掉之后可以显示一行省略，但是这样还是不是我想要的效果。最后我想到去掉所有样式，发现了问题所在，可能是上面样式的问题，导致了这个div就是没换行，最后加上了换行代码发现可以换行了。关键代码就是要加上white-space: normal;最新发现了一个有点头疼的问题，就是在设置文本超出两行的时候显示省略号不生效的问题，首先我的样式是这样写的。
css文字超出省略（不生效主要从盒模型问题处理）
weixin_43837268的博客
05-16 9948
1.单行省略 width:100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; 2.多行省略 overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -we...
css文字超出省略号代替不起作用解决方法汇总大全
weixin_45136521的博客
02-22 8267
网上给的说法都是直接加上面的，而在移动端，需要再加上最后一行代码。 原文地址
文本溢出隐藏显示省略号失效
weixin_43478592的博客
07-15 1327
之前百试百灵的代码，在这次却不生效了，找了半天都没找到失效原因，唉，惆怅。 附上之前的代码： overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 后台看到了某博客，瞎猫碰死耗子，试了一下： overflow:hidden; text-overflow:ellipsis; display:-webkit-box; /*
CSS设置文本超出显示省略号
p_s_p的博客
08-14 2626
CSS设置文本超出显示省略号
CSS超出文本指定宽度用省略号代替和文本不换行
09-24
CSS提供了多种方法来处理这种情况，尤其是当文本超出指定宽度时。本文将深入探讨如何使用CSS实现超出文本指定宽度用省略号代替以及禁止文本换行。 1. **一般文字截断** 当我们希望文本在特定宽度后被截断并用省略...
CSS控制文本超出指定宽度显示省略号和文本不换行效果的实现
09-24
在本篇文档中，我们将深入学习如何使用CSS控制文本的显示方式，具体来说是如何实现当文本超出指定宽度时，在文本的末尾显示省略号，并且文本不换行。这种效果在网页设计中非常常见，它能够帮助我们优雅地处理那些...
css 文本超出显示点点点，英文没效果
x03_01的博客
05-28 510
中文超出的确隐藏了，但是英文没有隐藏。//纯英文、数字、中文。
flex:auto元素内容超出显示省略号设置无效 解决方案
苍老师背后的男人
10-13 5661
举个例子：content元素的 width 为 200px（即下图 黄色背景），中间有两层div，分别是 aaa 和 bbb，都是flex布局，且没设置width，最里面一层有个p 元素。要求： p 元素的 宽度 根据 内容的长度 自适应； 若 p 元素内容超长，则显示为省略号； 问题：从上图可以看出，内容超出时，虽然设置了css样式，但并没有变成 省略号。 解决方案：p元素加多一个 width: 0 即可。如下图： 注意：width的值可以随便设置，只要不是百分比类的单位( 如vw，%..
css实现文本超过指定行数显示省略不生效的问题
关中刀客在青岛
10-22 1375
css实现文本超过指定行数显示省略不生效的问题 要用css实现文本超过指定行数显示三个点的效果，正常样式写法如下： /*超过2行隐藏，并以三个点结尾*/ .limit2line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } 但react项目中使用时遇到问题了。一共用了两处，一处起作用，一处不起作用，其中不起作用的元素在控制台中把样式前面的勾打掉
css 文本长度超出div，单行显示后，div宽度不生效
m0_37538302的博客
07-07 301
添加display: inline-grid;属性，div宽度生效。
css内容超出不显示省略号
qq_43371595的博客
09-26 423
不能使用display:flex,要使用span或者行内来代替。
css多行文本超出显示省略号无效解决方法
supming1的专栏
12-29 7395
css多行文本超出显示省略号，以2行为例，网上很多解决方法，如下。之前一直采用的是这种方法，最近发现无效了。vant也是这种写法， .txt-ellipsis-2 { display:-webkit-box; overflow: hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; text-overflow: ellipsis; word-break: break-all; } 排查后发现
css省略号方法及不显示问题修复
qq_40034690的博客
09-11 3199
文本溢出省略号方法及三段式无作用问题1、单行文本溢出（三段式）2、多行文本溢出显示省略号3、多行文本溢出省略号不显示的解决方法4、参考链接 1、单行文本溢出（三段式） 写完三段式记得写个宽度 overflow: hidden;//溢出隐藏 text-overflow:ellipsis;//溢出部分显示为省略号 white-space: nowrap;//不换行 2、多行文本溢出显示省略号 di...
vue css 文本溢出显示省略号、失效 相关问题整理
weixin_43886397的博客
12-15 1849
css处理语句处理的是整个css块，而不是在此之后的css（这个问题一般出现在windows系统设备中）打包后，-webkit-box-orient: vertical;会消失，溢出省略号会失效。：autoprefixer会自动移除老式过时的代码。ps：需检查当前项目是否安装了去除注释的插件。正常情况下，本地跑项目效果基本都OK。完美解决~ 撒花~ ~ ~ ~ ~ ~加上两条注释，正常情况下，效果达成！修改注释，咱就是说，一整个清净了~
css文本超出显示省略号 省略号换行显示怎么办
11-13
在CSS中，要实现文本超出显示省略号并且当省略号换行时能保持可读性，可以使用`text-overflow`属性结合`white-space`和`display`样式。以下是基本步骤： 1. 首先，你需要将元素的文本溢出处理设置为“ellipsis”，这通常通过`text-overflow: ellipsis;`完成。 ```css .text-overflow-truncate { text-overflow: ellipsis; overflow: hidden; } ``` 2. 如果你想让包含省略号的内容在换行时仍然显示完整，你可以设置`white-space`属性为`nowrap`，这样内容就不会自动换行。 ```css .text-overflow-truncate { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } ``` 然而，如果容器本身有固定的宽度，并且内容过长导致换行，你可能还需要配合`display`属性，如`display: -webkit-box` 或 `display: flex` 来限制行宽并使其水平对齐。 ```css .container { width: 限定值; display: -webkit-box; /* 对于老版本浏览器 */ display: flex; -webkit-line-clamp: 2; /* 可以限制最多显示两行 */ line-clamp: 2; -webkit-box-orient: vertical; /* 指定垂直方向 */ flex-wrap: wrap; } .text-overflow-truncate { overflow: hidden; text-overflow: ellipsis; } ``` 在这个例子中，最多会显示两行，并且省略号会在最后一行末尾。如果内容只有一行，则不会换行。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

归来巨星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值