无需JS实现卡片长文本两行截断 点击弹窗展示全文方案咨询

核心实现逻辑 #

• 直接使用Tailwind内置的line-clamp-2工具类，自动完成文本固定2行截断、超出内容显示省略号的效果，无需手写带Webkit前缀的复杂溢出样式
• 采用原生HTML的<details>/<summary>标签实现点击交互，完全不依赖JavaScript就能完成内容的显隐切换
• 配合Tailwind的状态选择器关联details的open状态，控制弹出模态容器的显示隐藏，匹配参考效果的交互体验

改造后的组件完整代码 #

<!-- 外层容器保留原有flex布局 -->
<div class="flex space-x-2 text-gray-400 text-sm my-3">
  <!-- 原有svg图标保留，加shrink-0防止挤压变形 -->
  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24"
    stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
      d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4-4z" />
  </svg>

  <!-- 原生交互组件，作为group状态承载 -->
  <details class="group flex-1">
    <!-- summary为可点击的文本展示区 -->
    <summary class="list-none cursor-pointer line-clamp-2 text-left leading-relaxed">
      {{ $service->comments }}
    </summary>
  </details>

  <!-- 模态弹窗为details的兄弟元素，通过CSS兄弟选择器关联状态 -->
  <div class="fixed inset-0 z-50 bg-black/40 hidden group-open:block">
    <div class="absolute left-1/2 top-1/2 w-[90%] max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-5 text-gray-600 shadow-xl">
      <p class="text-left leading-relaxed">
        {{ $service->comments }}
      </p>
      <p class="mt-3 text-right text-xs text-gray-400">点击任意空白区域即可关闭</p>
    </div>
  </div>
</div>

细节优化说明 #

• 给左侧SVG图标添加shrink-0属性，避免长文本挤压导致图标变形
• 移除原有冗余的overflow-y-auto、重复的垂直边距类，让文本在卡片内保持固定2行的精简展示
• 弹窗采用半透明黑色遮罩，白色内容卡片居中展示，添加操作提示降低用户困惑
• 利用浏览器原生的details外部点击自动关闭机制，实现点击遮罩即可收回弹窗的交互，全程零脚本加载，渲染性能更优

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