Mac端Safari浏览器CSS line-clamp属性显示异常问题求助

这两个问题均为Safari对-webkit-box旧版弹性布局的兼容性缺陷导致：

1. 多块级子元素在-webkit-box容器内时，-webkit-box-pack属性的布局计算逻辑和Chrome不一致，是导致段落重叠的核心原因
2. Safari计算-webkit-line-clamp的总高度时，不会将子元素的外边距（margin）纳入统计，会导致实际内容高度超过限制高度，出现文本截断

以下方案均不需要修改HTML结构，完全适配WordPress WYSIWYG编辑器输出的固定p标签结构：

方案1：全版本兼容（推荐） #

不需要改动原有边距视觉效果，兼容所有支持line-clamp的Safari版本：

.clamp-3-lines{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  /* 删掉导致重叠的多余属性-webkit-box-pack: end，多行截断场景不需要该配置 */
  /* 统一行高避免行高波动导致截断异常，可根据设计需求调整数值 */
  line-height: 1.5;
}

div{
  border: 1px solid black;
  max-width: 30ch;
  p:nth-child(2){
    color: red;
  }
  /* 新增规则：将p的外边距替换为内边距，视觉间距和原有margin完全一致，同时适配Safari高度计算逻辑 */
  p {
    margin-block: 0;
    /* 这里的数值可根据原有margin的大小调整，保证视觉效果不变 */
    padding-block: 0.5em;
  }
}

将margin替换为padding仅改变盒模型计算规则，不会影响原有设计效果，也不需要改动编辑器输出的内容结构

方案2：保留p原生margin的适配方案 #

如果不能修改p的margin规则，可以用display: contents让p标签不生成独立块级盒，直接将子内容作为容器的子项参与布局，同时保留p的文字样式（如第二个p的红色字体）：

.clamp-3-lines{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-height: 1.5;
  /* 把原来p的margin值加在容器上，保持整体边距视觉一致 */
  padding-block: 0.5em;
}
.clamp-3-lines > p {
  display: contents;
}

该方案兼容Safari 11.1及以上版本，覆盖市面上绝大多数苹果设备。

方案3：标准规范写法（适配新浏览器） #

如果不需要兼容2022年之前发布的老版本Safari，可以直接用CSS标准规范的line-clamp写法，从根源规避旧版webkit-box的布局bug：

.clamp-3-lines{
  overflow: hidden;
  /* 新标准写法，Safari 16及以上、Chrome 115及以上原生支持 */
  line-clamp: 3;
  /* 保留旧版前缀做向下兼容 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-height: 1.5;
}

内容的提问来源于stack exchange，提问作者Denis Cakmak