单行文本超出省略号有效，多行时不生效

最新推荐文章于 2023-09-10 08:59:14 发布

661lly

最新推荐文章于 2023-09-10 08:59:14 发布

阅读量149

点赞数

文章标签：前端开发语言 css

本文链接：https://blog.csdn.net/llykingsohyun/article/details/131251810

版权

文章探讨了在CSS中实现多行文本超出显示省略号时遇到的autoprefixer警告问题。通过使用特定的CSS属性如`-webkit-box-orient`,`-webkit-line-clamp`和`overflow:hidden`，可以成功创建多行文本省略号效果，同时规避编译警告。

摘要由CSDN通过智能技术生成

单行文本超出省略号有效

width:180px;

overflow:hidden;

white-space: nowrap;

text-overflow:ellipsis;

多行文本省略号样式失效丢失，

/*! autoprefixer: off */

-webkit-box-orient: vertical;

/* autoprefixer: on */

会报警号 autoprefixer警告'Autoprefixer applies control comment to whole block, not to next rules.'

网上找到的

/* autoprefixer: off */

-webkit-box-orient: vertical;

/* autoprefixer: on */

这个有效果，但是编译会报警告

最后改为：

width:180px;

text-overflow:ellipsis;

display: -webkit-box; /* 将元素设置为块级元素 */

/* autoprefixer: off */

-webkit-box-orient: vertical;

overflow: hidden; /* 隐藏超出部分 */

-webkit-line-clamp: 3; /* 设置最大行数为3行 */

/* autoprefixer: off */ 关键点不然-webkit-box-orient: vertical; 在编译阶段会被丢弃

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

661lly

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
单行文本超出省略号有效，多行时不生效

css 多行文字省略号不生效
复制链接

扫一扫

css实现单行文本溢出以及多行文本溢出

weixin_71893790的博客

12-12

930

css实现单行文本溢出以及多行文本溢出

CSS 多行省略失效 (-webkit-box-orient 失效)

weixin_34228387的博客

06-06

852

背景scss文件中，设置多行省略（如下），代码未生效 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;复制代码现象代码未生效：查看style,-webkit-box-orien...

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

两行或三行（多行）文本溢出显示...不生效

梦寻汝的博客

05-09

877

就在刚刚需要在react项目写一个限制文本长度两行，溢出显示省略号的场景，但是没有生效，经过查阅，得到以下解决方法，供参考～初次写法： .item-title{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } 但是没有生效～，查看盒模型发现-webkit-bo...

多行文字text-overflow: ellipsis省略号失效问题

qq_51978639的博客

02-03

1355

设置了多行文字超出显示省略号的样式，省略号就是不生效，为此折腾了好久。问题在于设置多行文字显示省略号时，只能指定显示的行数，不能设置高度

css多行文本省略号不生效

weixin_53582738的博客

02-15

2417

-webkit-box-orient: vertical不生效问题解决。

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

最新发布

湖北太米网络科技有限公司

09-10

935

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

css省略号方法及不显示问题修复

qq_40034690的博客

09-11

2994

文本溢出省略号方法及三段式无作用问题1、单行文本溢出（三段式）2、多行文本溢出显示省略号3、多行文本溢出省略号不显示的解决方法4、参考链接 1、单行文本溢出（三段式）写完三段式记得写个宽度 overflow: hidden;//溢出隐藏 text-overflow:ellipsis;//溢出部分显示为省略号 white-space: nowrap;//不换行 2、多行文本溢出显示省略号 di...

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

10-16

通过这种方式，我们可以有效地在微信小程序中实现多行文字的省略号显示功能。需要注意的是，由于`-webkit-line-clamp`和`-webkit-box`是Webkit内核特有的CSS属性，所以这种方法只适用于基于WebKit的浏览器或平台，如...

CSS超出文本指定宽度用省略号代替和文本不换行

09-24

CSS提供了多种方法来处理这种情况，尤其是当文本超出指定宽度时。本文将深入探讨如何使用CSS实现超出文本指定宽度用省略号代替以及禁止文本换行。 1. **一般文字截断** 当我们希望文本在特定宽度后被截断并用省略...

移动端的text-overflow多行文本溢出显示省略号(…)

12-10

在移动端，`text-overflow: ellipsis` 属性常用于单行文本溢出时显示省略号，但其本身并不支持多行文本的处理。本文将探讨如何在不同场景下实现多行文本溢出显示省略号的效果。首先，对于基于WebKit的浏览器（如...

HTML超出文本显示省略号...通过text-overflow实现

09-28

这样，当新闻标题或其他文本内容超过这个宽度时，超出的部分将被隐藏，并在末尾显示省略号。请注意，这个方法适用于单行文本。如果需要在多行文本中实现相同的效果，可以使用CSS的`-webkit-line-clamp`属性，但这个...

vue项目中多行文本超出省略失效解决方式

lavendersue的博客

09-11

2563

使用vue-cli构建的项目在打包之后，-webkit-box-orient: vertical 会丢失，还有包括使用flex布局进行兼容性hack写法的一些属性，如: #app{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; ...

text-overflow: ellipsis不生效的几种情况（记录一下）

qq_32166301的博客

06-13

1979

2.容器不可以是flex布局，若要使用flex布局，可以用flex布局的父元素包裹。text-overflow: ellipsis不生效的几种情况。1.没有给容器添加固定宽度。

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

supming1的专栏

12-29

7089

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实现文本超过指定行数显示省略不生效的问题

关中刀客在青岛

10-22

1271

css实现文本超过指定行数显示省略不生效的问题要用css实现文本超过指定行数显示三个点的效果，正常样式写法如下： /*超过2行隐藏，并以三个点结尾*/ .limit2line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } 但react项目中使用时遇到问题了。一共用了两处，一处起作用，一处不起作用，其中不起作用的元素在控制台中把样式前面的勾打掉

css设置显示几行多余显示省略号-样式不生效的解决方式

杜杜的博客

12-18

3036

显示一行，超出显示省略号 　　overflow: hidden; 　　text-overflow:ellipsis; 　　white-space: nowrap; 显示多行，超出显示省略号 word-break: break-all; 　　text-overflow: ellipsis; 　　display: -webkit-box; 　　-webkit-box-orient: vertical; 　　-webkit-line-clamp: 2; //显示几行　 overflow: hidden;

css 文本超出2行就隐藏并且显示省略号，并解决在less中不生效的问题

Lucky_bo的专栏

03-23

5117

首先，要知道css的三条属性。overflow:hidden; //超出的文本隐藏text-overflow:ellipsis; //溢出用省略号显示white-space:nowrap; //溢出不换行这三个是css的基础属性，需要记得。但是第三条属性，只能显示一行，不能用在这里，那么如何显示多行呢？css3解决了这个问题，解决方法如下：display:-webkit-box; //将对象作为弹...

CSS 多行文本省略号失效

q290057637的博客

12-29

583

CSS 多行文本省略号失效

css实现单行/多行的超出文本的裁剪、省略号

06-03

/* 多行文本超出省略号（WebKit内核浏览器）*/ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; ``` 3. 多行超出文本的裁剪、省略号（非WebKit内核浏览器） ``` /...

单行文本超出省略号有效，多行时不生效

单行文本 超出省略号 有效

多行文本省略号样式失效丢失，

网上找到的

最后改为：

单行文本超出省略号有效