css文字超出省略号代替不起作用解决方法汇总大全

先贴一个文字超出后显示省略号的css样式：

单行文字超出显示省略号：

.cont{overflow:hidden;/*内容超出后隐藏*/text-overflow:ellipsis;/*超出内容显示为省略号*/white-space:nowrap;/*文本不进行换行*/
}

多行文字超出显示省略号：

.cont{overflow:hidden; /*内容超出后隐藏*/text-overflow:ellipsis;/*超出内容显示为省略号*/display:-webkit-box; /*将对象作为弹性伸缩盒子模型显示*/-webkit-box-orient:vertical;/*从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）*/-webkit-line-clamp:2; /*这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。可根据需要设置超出多少行后显示省略号*/
}

*如果你的项目中装了 autoprefixer 管理浏览器前缀的插件的话。这个插件不仅能够帮你加 -webkit- 之类的前缀，同时还会帮你删除在 less，css，sass 中的样式。你会发现你在less文件中写的 -webkit-box-orient: vertical; 属性不见了
解决方法：关闭 autoprefixer 自动删除

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

加入两行注释在 -webkit-box-orient:vertical;前后，使用注释关闭autoprefixer。注意：/*! autoprefixer: off */中的!号不能省略。

重点来了：
博主本人用的是vant框架做的移动端开发，以上方法都加上了，但是问题仍然不能解决，加上display:-webkit-box; 反而使得溢出显示省略号的效果失效了！！！单行省略没有影响，但是多行显示省略号就会有问题。因此，翻遍资料和博客找到如下解决方案：

点击进入参考原文地址

网上给的说法都是直接加上面的，而在移动端，需要再加上最后一行代码。

.cont{overflow:hidden; text-overflow:ellipsis;display:-webkit-box; /*! autoprefixer: off */-webkit-box-orient:vertical;/* autoprefixer: on */-webkit-line-clamp:2; word-break:break-all;/*追加这一行代码*/
}

追加代码后，问题解决！

至此，问题解决。

css文字超出省略号代替不起作用解决方法汇总大全相关推荐

text-overflow:ellipsis 文字超出省略号代替不起作用解决方法
场景重现无效场景一现在我们来一个正常的例子 <!DOCTYPE html> <html> <head> <meta http-equiv="Co ...
flex布局下文字超出省略号代替不起作用解决方法
项目中发现,在flex布局下,希望目标元素文字超出省略号时,text-overflow: ellipsis属性无效,结论是设置文字超出省略号的元素,然后网上找了一圈设置父元素width: 0.over ...
css文字超出省略号显示
单行 width:100px; overflow: hidden;/*文字超出隐藏*/ text-overflow: ellipsis;/*文字超出省略号显示*/ white-space: nowra ...
终端服务器超出了最大允许连接数”的解决方法汇总
[导读]这几天频繁的远程登陆服务器,由于没有及时注销或者其他情况,早上再次登陆时系统提示:"终端服务器超出了最大允许连接数". 这几天频繁的远程登陆服务器,由于没有及时注销或者其他 ...
CSS - 文字超出省略号
单行文本设置溢出省略号 {overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } 多行文本设置溢出省略号方法一: {display: ...
CSS文字超出省略号无效
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 在使用上面三条属性时,文字并没有出现省略号,使用display: blo ...
css 文字超出省略号 ... 代替
单行文字 .name{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;word-break: normal;font-size ...
css文字超出省略号代替
一行省略: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 多行省略: overflow: hidden; displa ...
【CSS】css文字超出显示省略号/文字超过三行显示省略号..
单行 .p1{/*单行*/white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} 多行 .p2{/*多行*/overflow: hidd ...

css文字超出省略号代替不起作用解决方法汇总大全

css文字超出省略号代替不起作用解决方法汇总大全相关推荐

最新文章

热门文章