SharePoint Online视图格式化中-webkit-box-orient属性失效问题求助

问题根源 #

你的样式存在两个核心问题：

1. -webkit-line-clamp实现多行截断必须依赖display: -webkit-box和overflow: hidden两个属性，你未添加这两个基础属性，导致-webkit-box-orient即便生效也无法发挥作用；
2. SharePoint Online的视图格式化引擎会通过CSS优化工具自动移除-webkit-box-orient这类被标记为过时的带前缀属性。

解决步骤 #

1. 补充必要依赖属性：添加display: -webkit-box和overflow: hidden，满足多行文本截断的基础条件；
2. 强制保留目标属性：将样式从对象形式改为字符串形式，在-webkit-box-orient前添加/*! autoprefixer: ignore next */注释，阻止SharePoint的优化工具移除该属性。

修改后的代码示例 #

{
  "elmType": "div",
  "style": "word-break: break-word; -webkit-line-clamp: 10; height: 201px; /*! autoprefixer: ignore next */ -webkit-box-orient: vertical; margin-bottom: 15px; display: -webkit-box; overflow: hidden;"
}

调整后，多行文本截断的样式即可正常生效。

内容的提问来源于stack exchange，提问作者Rakesh Tank