Safari中line-clamp与绝对定位按钮对齐异常问题

问题背景 #

开发了一个文本截断组件，通过line-clamp实现指定行数截断，右下角显示"查看更多"按钮。该组件在Chrome、Edge、Firefox中显示正常，但Safari浏览器里按钮和文本的对齐出现严重偏差。已知line-clamp处于草案规范阶段，需定位偏差原因并解决。

偏差原因 #

1. Safari对-webkit-line-clamp的渲染差异：Safari使用display: -webkit-box实现截断时，会对容器的内边距、行高计算产生额外偏移，和其他浏览器的渲染逻辑不一致。
2. whitespace-pre-wrap的影响：该属性会保留文本中的空格和换行，Safari处理这类文本时，容器高度计算会和其他浏览器产生差异，导致绝对定位的按钮偏移。
3. 绝对定位基准问题：按钮基于父容器的bottom-0 right-0定位，但Safari中文本容器的实际高度和父容器高度不匹配，造成按钮位置偏差。

解决方案 #

方案1：统一文本容器的行高与排版属性 #

• 给文本容器明确设置固定行高，替换依赖Tailwind的leading-open（不同浏览器对该类的解析存在差异），比如用leading-normal（对应line-height:1.5）。
• 移除whitespace-pre-wrap，改用white-space:normal，避免Safari因保留空格换行导致的高度计算偏差。

修改后的代码：

<div class="relative mb-2">
  <p class="leading-normal text-md md:text-lg text-color-text line-clamp-5">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>

  <button class="see-more-button bg-white text-md md:text-lg border-0 leading-normal p-0 cursor-pointer absolute bottom-0 right-0 hover:underline" type="button">…see more</button>
</div>

方案2：将按钮嵌入文本容器内（推荐） #

把按钮放在文本容器内部，利用背景色覆盖原生截断省略号，让按钮对齐文本的基线，避免父容器和文本容器的高度偏差问题：

<div class="relative mb-2">
  <p class="leading-normal text-md md:text-lg text-color-text line-clamp-5">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    <span class="absolute bottom-0 right-0 bg-white px-1">
      <button class="see-more-button text-md md:text-lg border-0 leading-normal p-0 cursor-pointer hover:underline" type="button">…see more</button>
    </span>
  </p>
</div>

方案3：使用Tailwind内置兼容类 #

Tailwind v3+内置的line-clamp-*类已经处理了部分浏览器兼容性，替换自定义的.clamped类，减少自定义样式带来的冲突：

/* 无需自定义.clamped类，直接使用Tailwind的line-clamp-5 */

效果说明 #

• 方案1通过统一排版属性，减少浏览器间的渲染差异，让按钮定位基准更准确。
• 方案2将按钮和文本放在同一容器内，完全基于文本的行高对齐，从根源解决Safari的定位偏差问题，同时用背景色覆盖原生省略号，保证显示一致性。

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