Sass中display: -webkit-box在Chrome中失效，请求技术帮助

问题说明 #

我用Sass定义了实现多行文本省略的混合宏，编译后的CSS包含了必要属性，且已确认这些属性在Chrome具备兼容性，但实际效果却不生效。

Sass混合宏定义 #

@mixin kit($rows: 2, $size: 100%) { 
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: $rows; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    width: $size;
    max-width: $size;
    white-space: pre-wrap;
}

混合宏调用方式 #

@include kit;

编译后的CSS代码 #

font-weight: bold;
font-size: 1.8rem;
line-height: 1.4;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
max-width: 100%;
white-space: pre-wrap;

编译后还出现了一行无效代码：

-webkit-line-clamp text-overflow: ellipsis;

排查修复方案 #

1. 移除white-space: pre-wrap
-webkit-line-clamp依赖默认的文本换行规则，pre-wrap会强制保留换行和空格，直接打断多行省略的生效逻辑，删掉该属性即可。

2. 清理无效编译代码
   编译后出现的-webkit-line-clamp text-overflow: ellipsis;是语法错误，检查Sass代码是否有规则冲突，确保编译过程生成标准CSS。

3. 排查父容器干扰
   检查目标元素的父容器是否设置了display: flex、float等属性，这类布局属性会破坏-webkit-box的垂直布局结构，导致多行省略失效。

4. 验证样式优先级
   通过Chrome开发者工具查看元素最终计算样式，确保混合宏生成的核心属性（display: -webkit-box、-webkit-line-clamp等）没有被其他样式覆盖。

内容的提问来源于stack exchange，提问作者Vinh Lè