Text overflow and truncation in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

How does Tailwind CSS truncate text?

Given a paragraph with long text inside a fixed-width container, which Tailwind CSS class will truncate the text with an ellipsis if it overflows?

Tailwind

<div class="w-48 border border-gray-300">
  <p class="?">This is a very long text that should be truncated with an ellipsis if it does not fit in the container.</p>
</div>

A truncate

B overflow-hidden

C text-ellipsis

D text-truncate

💡 Hint

Look for the Tailwind class that combines overflow, white-space, and text-overflow properties.

The truncate class in Tailwind CSS applies overflow: hidden;, white-space: nowrap;, and text-overflow: ellipsis; together. This combination truncates overflowing text with an ellipsis.

Other classes like overflow-hidden only hide overflow but do not add ellipsis. text-ellipsis and text-truncate are not valid Tailwind classes.

🧠 Conceptual

intermediate

What CSS properties does Tailwind's truncate class apply?

Which set of CSS properties does the Tailwind truncate class apply to achieve text truncation with ellipsis?

A overflow: scroll; white-space: nowrap; text-overflow: clip;

B overflow: visible; white-space: normal; text-overflow: clip;

C overflow: hidden; white-space: nowrap; text-overflow: ellipsis;

D overflow: hidden; white-space: normal; text-overflow: ellipsis;

💡 Hint

Think about what is needed to hide overflow and show ellipsis on a single line.

To truncate text with an ellipsis, the text must not wrap (white-space: nowrap;), overflow must be hidden (overflow: hidden;), and the ellipsis must be shown (text-overflow: ellipsis;).

Other options either allow wrapping or do not show ellipsis.

❓ selector

advanced

Which Tailwind class combination truncates multiline text with ellipsis?

You want to truncate text after 3 lines with an ellipsis using Tailwind CSS. Which class combination achieves this?

A text-ellipsis line-clamp

B line-clamp-3

C overflow-hidden whitespace-nowrap

D truncate

💡 Hint

Tailwind v3.2+ supports multiline truncation using line-clamp classes.

The line-clamp-3 class (Tailwind CSS v3.2+) truncates text after 3 lines and adds an ellipsis.

The truncate class only truncates single-line text.

Other options are invalid or incomplete.

❓ layout

advanced

How to prevent text truncation on small screens but truncate on larger screens?

You want text to show fully on small screens but truncate with ellipsis on medium and larger screens using Tailwind CSS. Which class setup achieves this?

Tailwind

<p class="?">Responsive text truncation example that changes with screen size.</p>

A overflow-visible whitespace-normal md:truncate

B truncate md:overflow-visible md:whitespace-normal

C truncate md:truncate

D overflow-hidden whitespace-nowrap md:overflow-visible

💡 Hint

Use base classes for small screens and prefix with md: for medium and up.

Setting overflow-visible whitespace-normal by default allows full text on small screens.

Adding md:truncate applies truncation starting at medium screens.

Other options either truncate on small screens or revert truncation incorrectly.

❓ accessibility

expert

How to ensure truncated text remains accessible?

When truncating text with Tailwind CSS, what is the best way to ensure screen reader users can access the full text?

Tailwind

<p class="truncate">This is a very long text that will be truncated visually.</p>

A Add role="presentation" to hide text from screen readers

B Set aria-label to the full text content

C Use aria-hidden="true" to hide truncated text

D No additional attributes needed; truncation is accessible by default

💡 Hint

Truncation with ellipsis is a visual-only effect; screen readers read the full text from the DOM.

CSS text truncation (e.g., truncate) is purely visual. The full text remains in the DOM, so screen readers access and announce the entire content by default.

No ARIA attributes are needed. aria-label is unnecessary and risks mismatching the content.

A and C incorrectly hide content from screen readers.