如何在Safari中实现超出区块的文本自动隐藏？

以下是针对Safari和Firefox浏览器的可行解决办法：

• 确保元素块级显示
  部分行内元素的overflow属性不会生效，给目标元素设置块级或行内块级显示：

  .test {
    overflow: hidden;
    max-height: 270px;
    display: block; /* 或 inline-block，根据布局需求调整 */
  }
  

• 使用line-clamp配合高度限制
  结合max-height控制高度，利用line-clamp属性（带前缀）实现跨浏览器的内容截断隐藏：

  .test {
    overflow: hidden;
    max-height: 270px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: unset; /* 不限制行数，由max-height控制截断 */
    line-clamp: unset;
  }
  

  Safari需要-webkit-前缀，Firefox已支持标准line-clamp属性，设置后超出max-height的内容会被隐藏。

• 排查布局冲突
  若元素存在浮动或脱离文档流的情况，会导致overflow失效：

  • 给父元素添加清除浮动的样式：

    .test::after {
      content: "";
      display: table;
      clear: both;
    }
    

  • 确保元素的position属性为relative或static，避免脱离文档流。

• 重置文本换行属性
  若设置了white-space: nowrap，文本不会换行可能导致横向超出，需重置为正常换行：

  .test {
    overflow: hidden;
    max-height: 270px;
    white-space: normal;
  }
  

内容的提问来源于stack exchange，提问作者Ilya Avkhimenya