React - Fluent UI - How to truncate the text in a card

Question

I have the example from this link: https://codesandbox.io/s/upbeat-wood-tscc2h?file=/example.tsx

If the text in the card is too long, the text is clipped. I've been trying to truncate the text so I have some sort of elipses or something similar at the end so the text doesn't look bad but I haven't been able to find a solution.

Is this possible?

Answer 1

To truncate the text and show ellipsis (three dots ...) when the text overflows its container, you can use a combination of CSS styles:

• white-space: nowrap to prevent wrapping of the text.
• overflowX: hidden to hide overflowing text for a block-level element's left and right edges.
• overflowY: hidden to hide overflowing text for a block-level element's top and bottom edges.
• text-overflow: ellipsis to show an ellipsis when the text overflows its box.

(I tried using overflow, but it kept erroring with: overflow: string Type 'string' is not assignable to type 'never'.ts(2322))

However, for these styles to work, the container needs to have a defined width and not be allowed to grow indefinitely.

Add a new style for the truncating text.

truncatedText: {
    whiteSpace: "nowrap",
    overflowX: "hidden",
    overflowY: "hidden",
    textOverflow: "ellipsis",
    maxWidth: "100%"
},

Apply the truncatedText style to the text you want to truncate; update the <p> containing the long text:

<p className={`${styles.text} ${styles.truncatedText}`}>
    Donut chocolate bar oat cake. Dragée ...
    // rest of the text
</p>

See codesandbox.io

With these changes, if the text in your card becomes too long for its container, it will be truncated and an ellipsis will be shown.

Note: That will work when the text is expected to fit on one line.