文本溢出隐藏显示省略号失效

之前百试百灵的代码，在这次却不生效了，找了半天都没找到失效原因，唉，惆怅。

附上之前的代码：

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

后台看到了某博客，瞎猫碰死耗子，试了一下：

overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
/*! autoprefixer: off */
-webkit-box-orient:vertical;
/* autoprefixer: on */
-webkit-line-clamp:2;

说是项目中装了 autoprefixer 管理浏览器前缀的插件，导致-webkit-box-orient: vertical;属性不见了

这个插件不仅能够帮你加 -webkit- 之类的前缀，同时还会帮你删除在 less，css，sass 中的样式。你会发现你在less文件中写的 -webkit-box-orient: vertical; 属性不见了

虽然我并不认为我的项目中装了这个插件，但神奇的是它生效了，嘿嘿

于是我这激动得颤抖的小手手，点向了控制台

嗯？这段警告是怎么肥事？！！

然后，我向大佬求助了

大佬说：“你可以用 height: 40px; line-height: 20px; 这类似的，一行就 1:1，2行就 2:1，溢出来的 overflow: hidden; 就完事了” 。

我瞬间无话可说，唉，大佬就是大佬，头脑就是这么活，膜拜膜拜膜拜拜~

不说了，继续当刷题狗，附上答题链接，有需要的伙伴自取：web前端工程师

文本溢出隐藏显示省略号失效相关推荐

全局mixin封装文本溢出隐藏显示省略号
全局mixin封装文本溢出隐藏显示省略号 @mixin ellipsis2($line) {display: -webkit-box;overflow: hidden;text-overflow: e ...
css文本溢出隐藏显示省略号
一.单行文本显示省略号 1.先强制文本一行内显示 white-space:nowrap(不换行); 2.超出部分影藏 overflow:hidden; 3.用省略号代替超出的部分 text-overf ...
文本溢出处理显示省略号
一.文本溢出处理显示省略号 1.单行文本溢出显示省略号方法1:省略号单行文本: width:200px:设置盒子的宽度(限制宽度) white-space:nowrap:设置文本不换行 overf ...
web 文本溢出处理显示省略号
1.单行文本溢出显示省略号方法1:省略号单行文本: width:200px:设置盒子的宽度(限制宽度) white-space:nowrap:设置文本不换行 overflow:hidden:溢出隐 ...
css单行、多行文本溢出隐藏显示省略号
单行文本溢出隐藏 overflow: hidden; // 溢出隐藏 text-overflow: ellipsis; // 文本溢出时发生的事,ellipsis表示用省略号代替溢出的文本 white ...
svg中如何让文本溢出时显示省略号
svg中如何让文本溢出时显示省略号最近在使用d3.js实现一个树状组织结构图,遇到如下图所示的问题,要求是文本内容固宽,溢出内容应用省略号代替,如果是使用普通html标签实现的话,是比较简单的,ov ...
单行文字溢出隐藏显示省略号
单行文字溢出隐藏显示省略号 1. 让换行的文字强制在一行显示.属性 white-space: nowrap; 2. 溢出的部分隐藏.overflow: hidden: 3. 文字溢出显示用省略号. t ...
CSS设置文本超出隐藏显示省略号
CSS设置文本超出隐藏显示省略号单行文本多行文本在线试一试单行文本 HTML代码如下: <pclass="ellipsis1"title="单行文本,超出隐 ...
文本CSS多行溢出隐藏显示省略号
处理动态文本超长问题: 如下图,显然不符合美观视觉此时我们可以这样写,文字不换行溢出显示省略号: {white-space: nowrap;text-overflow: ellipsis;overf ...

文本溢出隐藏显示省略号失效

文本溢出隐藏显示省略号失效相关推荐

最新文章

热门文章