求助：为div设置text-ellipsis等属性后未显示省略号

你遇到的问题根源是text-ellipsis仅对单行文本生效，且需要直接应用在要截断的文本元素上，而非包含多个块级元素的父容器。你现在把截断属性加在包含<h2>和<p>的div上，这个div里的两个元素会自动换行，white-space:nowrap无法强制它们在一行显示，自然触发不了省略号。

修复方案： #

• 给每个需要截断的文本元素（<h2>和<p>）单独添加截断属性
• 确保这些文本元素在flex布局下有明确的宽度限制（否则会自适应内容宽度，不会触发截断）

修改后的代码示例：

import Image from "next/future/image";
import Link from "next/link";

export default function MenuOption({ title, description, icon, route }) {
  return (
    <Link href={route}>
      <div className="flex h-[74px] w-full cursor-pointer gap-4 rounded-lg bg-gray-50 p-4 ring-1 ring-gray-300 drop-shadow-sm hover:ring-2">
        <Image src={icon} alt={`${title} Icon`} className="mt-1 h-5 w-auto" />
        {/* 父div改为flex垂直布局，让h2和p上下排列并占满剩余宽度 */}
        <div className="flex flex-col flex-1 overflow-hidden">
          {/* 给h2单独添加截断属性 */}
          <h2 className="text-md font-medium text-gray-900 overflow-hidden text-ellipsis whitespace-nowrap">
            {title}
          </h2>
          {/* 给p单独添加截断属性 */}
          <p className="text-sm text-gray-500 overflow-hidden text-ellipsis whitespace-nowrap">
            {description}
          </p>
        </div>
      </div>
    </Link>
  );
}

关键改动说明： #

1. 移除了原父div的截断属性，改为flex flex-col flex-1 overflow-hidden，让内部文本容器垂直排列并占满剩余可用宽度
2. 给<h2>和<p>分别添加overflow-hidden text-ellipsis whitespace-nowrap（也可以直接用Tailwind的truncate类，效果完全一致）
3. 通过flex-1确保文本容器能获取足够的宽度，触发截断逻辑

这样修改后，当title或description内容过长时，就会在单行末尾显示预期的省略号了。

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