为何固定高度下line-clamp在Safari浏览器中失效？

问题根源 #

iPhone 7搭载的旧版Safari（对应iOS 15及以下）对CSS文本截断的支持依赖完整的-webkit-前缀属性组合，而默认的Tailwind line-clamp-2类在部分布局场景下（比如内联元素容器）无法生成旧Safari所需的全部属性，导致截断失效。

修复步骤 #

1. 安装并启用Tailwind Line Clamp插件
   确保你已经安装官方的line-clamp插件，它会自动生成兼容旧Safari的CSS属性：

   npm install @tailwindcss/line-clamp
   

   在tailwind.config.js中注册插件：

   module.exports = {
     // 其他配置...
     plugins: [
       require('@tailwindcss/line-clamp'),
     ],
   }
   

2. 调整组件布局与样式
   修改你的React组件代码，确保文本截断的容器满足旧Safari的布局要求：

   <div className="lg:h-[calc(100vh-60px)] overflow-y-scroll bg-[#222] h-[30vh] max-lg:mb-[20px]">
       {listEpisode.map((item, i) => (
           <Link
               to={`episode-url`}
               key={i}
               className="w-full h-[70px] px-[12px] py-1 hover:text-white hover:opacity-80 hover:bg-white/20 duration-200 ease-in-out odd:bg-[#111111] even:bg-[#272727] block"
           >
               <p className="h-full leading-normal overflow-hidden box -webkit-line-clamp-2 -webkit-box-orient-vertical">
                   {item.title}
               </p>
           </Link>
       ))}
   </div>
   

   关键修改点：

   • 给Link添加block类：将默认内联的a标签转为块级元素，确保固定高度h-[70px]和内边距生效
   • 移除p标签的inline类：内联元素不支持-webkit-box布局，无法触发文本截断
   • 给p标签添加：
     • h-full：让文本容器填满父元素的固定高度
     • box：对应display: -webkit-box（旧Safari必须的布局属性）
     • -webkit-line-clamp-2：限制文本显示两行
     • -webkit-box-orient-vertical：设置盒子垂直方向，配合line-clamp生效
     • overflow-hidden：隐藏超出容器的文本

3. 验证行高适配
   确保leading-normal的行高不会让两行文本超出70px的容器高度，如果仍有溢出，可以尝试改用leading-tight调整行高，保证文本在容器内被正确截断。

4. 清除Safari缓存
   在iPhone 7的Safari中清除浏览器缓存后再测试，避免旧样式缓存导致的显示异常。

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