vue中打包后-webkit-box-orient: vertical消失（超出省略号失效）

妹妹你大胆地往前走啊！

已于 2022-04-01 09:15:39 修改

阅读量1.5k

点赞数 3

分类专栏： css html5 文章标签： css html

于 2019-06-20 11:25:15 首次发布

本文链接：https://blog.youkuaiyun.com/danruWang/article/details/92996218

版权

博客主要讲述了使用CSS代码让文字超出范围隐藏并显示省略号时遇到的问题。本地运行正常，但build后 -webkit-box-orient: vertical; 失效，问题出在webpack。给出了两种解决方案，一是修改代码并带上感叹号，二是设置autoprefixer参数为false，还提及了相关参数设置。

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

一、第一种方法
单行

1.宽度固定
2.overflow:hidden /* 超出部分不显示 */
3.white-space:nowrap/* 不换行 */
4.text-overflow:ellipsis /* 超出部分显示为... */

之前写代码的时候遇到一个问题，就是用了下面这段css代码来让文字超出范围隐藏并显示省略号。(**line-height要加上，要不会超出部分会出现半个字符的情况)

line-height: **px;
overflow:hidden;/*超出隐藏*/
text-overflow:ellipsis;/*文本溢出时显示省略标记*/
display:-webkit-box;/*设置弹性盒模型*/

最低0.47元/天解锁文章