Cắt chữ (truncation)

{/* Mặc định: để chữ xuống dòng; wrap-break-word cho chuỗi dài không có khoảng trắng */}
<Card className="w-72">
  <CardHeader
    image={<Document20Regular />}
    header={<span className="wrap-break-word">Báo cáo tổng hợp doanh thu và chi phí vận hành quý 3…</span>}
    description="Cập nhật hôm qua"
  />
</Card>

{/* Một dòng: cần một chiều rộng giới hạn; trong flex, phần tử cha phải có min-w-0 */}
<p className="truncate">…</p>

{/* Nhiều dòng */}
<p className="line-clamp-2">…</p>

{/* Component Text */}
<Text truncate wrap={false} block>…</Text>

{/* Trong flex: thiếu min-w-0 thì truncate không có tác dụng */}
<div className="flex items-center gap-2">
  <Document20Regular className="shrink-0" />
  <span className="min-w-0 flex-1 truncate">…</span>
</div>

import * as React from "react";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui";

/** Link chỉ hiện tooltip toàn văn khi chữ thật sự bị cắt. */
export function TruncatedLink({ href, children }: { href: string; children: string }) {
  const ref = React.useRef<HTMLAnchorElement>(null);
  const [open, setOpen] = React.useState(false);
  const isTruncated = () => {
    const el = ref.current;
    return !!el && el.scrollWidth > el.clientWidth;
  };

  return (
    <Tooltip open={open} onOpenChange={(next) => setOpen(next && isTruncated())}>
      <TooltipTrigger asChild>
        <a ref={ref} href={href} className="block min-w-0 truncate text-link hover:underline">
          {children}
        </a>
      </TooltipTrigger>
      <TooltipContent className="max-w-80 break-all">{children}</TooltipContent>
    </Tooltip>
  );
}