Text

Text with ellipsize cuts a line that overflows its container and ends it with an ellipsis. When it cuts the text, it adds a title so the full text shows on hover.

Usage#

import { Text } from "@clawscale/react";

<Text ellipsize>{dataset.path}</Text>

Examples#

Ellipsize#

Give the container a fixed width. Hover a cut path to read all of it. Short paths get no title.

Path	Size
s3://acme-lake/raw/events/region=eu-west-1/date=2026-09-27/part-00017.parquet	412 MB
s3://acme-lake/curated/orders_daily/date=2026-09-27/part-00000.parquet	96 MB
s3://acme-lake/tmp/_SUCCESS	0 B

core/text/ellipsize.tsx

import { HTMLTable, Text } from "@clawscale/react";

const FILES = [
  { path: "s3://acme-lake/raw/events/region=eu-west-1/date=2026-09-27/part-00017.parquet", size: "412 MB" },
  { path: "s3://acme-lake/curated/orders_daily/date=2026-09-27/part-00000.parquet", size: "96 MB" },
  { path: "s3://acme-lake/tmp/_SUCCESS", size: "0 B" },
];

export default function TextEllipsize() {
  return (
    <HTMLTable compact style={{ maxWidth: 440, tableLayout: "fixed", width: "100%" }}>
      <thead>
        <tr>
          <th>Path</th>
          <th style={{ width: 96 }}>Size</th>
        </tr>
      </thead>
      <tbody>
        {FILES.map((file) => (
          <tr key={file.path}>
            <td>
              <Text ellipsize>{file.path}</Text>
            </td>
            <td>{file.size}</td>
          </tr>
        ))}
      </tbody>
    </HTMLTable>
  );
}

Props interface#

Text renders a <div>. Set tagName="span" inside inline content.

interface TextProps extends Props, React.RefAttributes<HTMLElement>, Omit<React.HTMLAttributes<HTMLElement>, "title">@clawscale/react

Props	Description
`children`	`React.ReactNode`
`className`	`string` A space-delimited list of class names to pass along to a child element. Inherited from `Props`
`ellipsize`	`boolean` = `false` Indicates that this component should be truncated with an ellipsis if it overflows its container. The `title` attribute will also be added when content overflows to show the full text of the children on hover.
`tagName`	`keyof React.JSX.IntrinsicElements` = `"div"` HTML tag name to use for rendered element.
`title`	`string` HTML title of the element