React折叠文本组件：Safari与Chrome/Firefox元素高度差异问题

我开发了一个支持指定显示行数的React可折叠文本组件，核心用CSS line-clamp实现文本截断，JS层面通过对比元素scrollHeight和「指定行数×行高」的值来控制展开/收起按钮的显示。但在Safari里遇到两个明显问题：

1. scrollHeight取值远大于Chrome和Firefox，导致按钮渲染逻辑完全失效
2. line-clamp会让内容直接坍缩到高度0，目前靠设置min-height临时规避

以下是针对性的修复方案：

修复scrollHeight计算异常 #

Safari中，被line-clamp截断的元素scrollHeight会返回完整内容的总高度，而Chrome/Firefox返回的是截断后的可见高度，这直接导致对比逻辑失效。换用getBoundingClientRect()获取元素实际渲染高度来做判断：

import { useState, useRef, useEffect } from 'react';

const CollapsibleText = ({ maxLines, children }) => {
  const [showToggle, setShowToggle] = useState(false);
  const [isExpanded, setIsExpanded] = useState(false);
  const textRef = useRef(null);

  useEffect(() => {
    if (!textRef.current) return;

    // 确保文本元素有显式line-height，避免浏览器解析差异
    const lineHeight = parseFloat(getComputedStyle(textRef.current).lineHeight);
    const targetHeight = lineHeight * maxLines;
    // 获取元素当前实际渲染的高度
    const actualHeight = textRef.current.getBoundingClientRect().height;

    // 加1px容差，避免Safari的精度计算偏差
    setShowToggle(actualHeight > targetHeight + 1);
  }, [maxLines, children]);

  return (
    <div className="collapsible-container">
      <div
        ref={textRef}
        className={`collapsible-text ${isExpanded ? 'expanded' : ''}`}
        style={{ '--max-lines': maxLines }}
      >
        {children}
      </div>
      {showToggle && (
        <button onClick={() => setIsExpanded(!isExpanded)}>
          {isExpanded ? '收起' : '展开'}
        </button>
      )}
    </div>
  );
};

同时建议给文本元素显式设置固定line-height（比如1.5rem），不要用normal值，避免不同浏览器解析出差异极大的行高。

修复line-clamp导致内容坍缩的问题 #

Safari对line-clamp的支持要求完整的CSS声明链，且要避免冲突的高度设置。替换min-height为更可靠的写法：

.collapsible-text {
  display: -webkit-box;
  -webkit-line-clamp: var(--max-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5rem;
  /* 用计算值确保最小高度，同时兼容截断逻辑 */
  min-height: calc(var(--max-lines) * 1.5rem);
}

.collapsible-text.expanded {
  -webkit-line-clamp: unset;
  min-height: unset;
}

关键要点：

• 必须同时包含display: -webkit-box和-webkit-box-orient: vertical，缺一不可
• 用CSS变量传递最大行数，避免硬编码带来的维护问题
• 展开状态时重置-webkit-line-clamp和min-height，让内容完整显示

额外优化点 #

• 如果内容包含异步加载的文本（比如接口返回内容），需要在内容更新后重新触发高度计算
• 测试Safari时记得清除浏览器缓存，避免旧样式残留
• 可以给按钮添加过渡动画，提升用户交互体验

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