关于css文字超出显示省略号失效

最新推荐文章于 2025-06-19 10:02:17 发布

原创最新推荐文章于 2025-06-19 10:02:17 发布 · 1.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#Css

Css 专栏收录该内容

13 篇文章

订阅专栏

博客介绍了在CSS中使用autoprefixer的方法，只需加上/* autoprefixer: off */和/*autoprefixer: on */。原因是autoprefixer会自动移除老式过时代码，所以要先关闭再开启。

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.youkuaiyun.com/weixin_44932450

只需要加上

/* autoprefixer: off */

/autoprefixer: on /

white-space: normal;
display: -webkit-box;
-webkit-box-orient: vertical;
/* autoprefixer: off */
-webkit-line-clamp: 2;    //只显示两行
/*autoprefixer: on */
overflow: hidden;

产生的原因是autoprefixer自动移除老式过时的代码,所以要先关闭再开启

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

暖一杯茶

关注关注

4
点赞
踩
5

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

解决vue cli3中多行文字超出部分显示省略号失效问题

kuguhuan的博客

03-14

1844

多行超出隐藏，一般的css样式： div { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } 在普通的web项目中，这样做是完全OK的但是在vue项目中，一启动项目就会发现多行文本隐藏失效了，...

文字过长使用省略号展示，text-overflow 的使用和不生效场景的解决办法，flex 布局中文字省略展示的坑

有一棵树的博客

04-25

1856

文字过长使用省略号展示，text-overflow 的使用和不生效场景的解决办法，flex 布局中文字省略展示的坑

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

css文字超出省略（不生效主要从盒模型问题处理）

weixin_43837268的博客

05-16

9959

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 text-overflow 添加文本省略号失效

Ttowx的博客

05-19

535

②width和其他属性冲突：如：display:flex。①未设置width宽度。

超出显示省略号的css样式不生效

最新发布

longhui_yuan的博客

06-19

186

autoprefixer: off */ // 使用控制注释来禁用Autoprefixer。以往都是通过如图所示这种方式写的，没有遇到问题。

css中多行省略号不生效的问题?

4G/5G随身WiFi专业DIY改装

09-10

1250

多行省略号不生效的问题可能是由于以下原因之一：1. 高度限制：多行省略号需要给容器元素设置一个固定的高度，否则文本会自动撑开容器，不会出现省略号。在你的代码中，如果 .item 元素没有设置高度，多行省略号效果可能无法生效。2. 浏览器兼容性：多行省略号的样式属性 -webkit-line-clamp 是一个非标准的属性，...

多行文本省略号失效

tan_xiao_tan的博客

05-21

749

css两行全展示,超出两行的省略号展示,样式失效?

微信小程序实现多行文字超出部分省略号显示功能

10-16

在微信小程序的开发过程中，有时候我们需要对长文本进行合理的展示，特别是在列表中，为了保持界面的整洁和美观，我们可能需要限制文字的显示行数，超出部分则用省略号表示。本文将详细介绍如何在微信小程序中实现这...

弹性盒子的文字超出隐藏省略号失效

04-25

如果你希望在弹性盒子中实现文字超出隐藏并显示省略号，可以按照以下步骤进行设置： 1. 将弹性盒子容器的`overflow`属性设置为`hidden`，这样超出容器的内容将被隐藏。 2. 为包含文字的元素添加`white-space: ...

vue 多行超出显示省略号 打包后-webkit-box-orient:vertical属性被移除导致失效

qq_29236119的博客

03-22

276

1、在vue项目中有时候会有固定多少行超出显示点点的需求，实现代码如下： .info{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } 2、测试环境正常，但是build打包之后就没有显示点点了，后来发现-webkit-box-orient:vertical被移除了，导致原因

多行溢出隐藏显示... 失效

Wangnuor的博客

04-21

366

一定听添加 white-space: pre-wrap;属性极大可能避免无效问题。

礼拜三log~CSS控制文本不换行＋省略号 & li宽度无效的解决方法 & 在js中获取后台变量

YuqiRealm.com

03-30

549

CSS控制文本不换行＋省略号 li宽度无效的解决方法 js获取后台变量

css溢出隐藏省略号不生效如何解决？

精通前端技术，了解后端接口

09-12

3408

css溢出隐藏省略号不生效如何解决？

css 文本溢出显示省略号

qq_39917399的博客

05-27

193

webkit内核下 .content { overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; } 兼容其他浏览器 .content { font-size: 14px; color: #4A4A4A; overflow: hidden; line-height: 26px; position: relative; height: 45

css-文本换行样式溢出省略号不生效

2201_75568521的博客

01-23

1032

所以，接下来要做的，是要将Div设置启动换行效果再加下面一行代码就可以了。一般就是如下就可以但是发现控制显示行数和文本省略不生效。

css多行文本超出显示省略号无效解决方法

supming1的专栏

12-29

7433

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; } 排查后发现

单行文本省略失效

weixin_46748834的博客

12-12

851

单行省略文本失效

超出两行显示省略号不生效的问题

qq_36182265的博客

05-29

188

发现不生效，只展示了一行，并且被截断了，然后一直尝试修改，发现把display:-webkit-box注释掉之后可以显示一行省略，但是这样还是不是我想要的效果。最后我想到去掉所有样式，发现了问题所在，可能是上面样式的问题，导致了这个div就是没换行，最后加上了换行代码发现可以换行了。关键代码就是要加上white-space: normal;最新发现了一个有点头疼的问题，就是在设置文本超出两行的时候显示省略号不生效的问题，首先我的样式是这样写的。