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.

Practice

1. What does the Tailwind CSS class truncate do to text inside an element?

easy

A. It centers the text horizontally.

B. It cuts off overflowing text and adds an ellipsis (…) at the end.

C. It changes the text color to gray.

D. It makes the text bold and larger.

Solution

1. Step 1: Understand the purpose of truncate

   The truncate class in Tailwind applies CSS rules to hide overflow text and show an ellipsis.

2. Step 2: Recognize the visual effect

   This means long text that doesn't fit the container ends with dots (…) instead of wrapping or overflowing.

3. Final Answer:

   It cuts off overflowing text and adds an ellipsis (…) at the end. -> Option B

4. Quick Check:

   truncate = text cut off with dots [OK]

Hint: Remember: truncate means cut off with dots [OK]

Common Mistakes:

• Thinking truncate changes text style like bold or color
• Confusing truncate with text alignment classes
• Assuming truncate wraps text instead of cutting it

2. Which Tailwind CSS class combination correctly truncates text inside a fixed-width box?

easy

A. truncate text-center

B. truncate max-w-full

C. overflow-visible truncate

D. truncate w-48

Solution

1. Step 1: Identify required classes for truncation

   Truncation needs truncate plus a fixed width like w-48 to limit container size.

2. Step 2: Check each option

   truncate w-48 uses truncate and a fixed width, so it works. Others either lack fixed width or have conflicting overflow.

3. Final Answer:

   <code>truncate w-48</code> -> Option D

4. Quick Check:

   truncate + fixed width = truncation works [OK]

Hint: Always add fixed width with truncate for effect [OK]

Common Mistakes:

• Using truncate without fixed width or max-width
• Setting overflow-visible which disables truncation
• Confusing text alignment with truncation

3. Given this HTML snippet:

<div class="w-32 truncate">This is a very long text that should be cut off.</div>

What will the user see in the browser?

medium

A. "This is a very long text that shoul…" with an ellipsis at the end

B. "This is a very long text that should be cut off" wrapped on multiple lines

C. "This is a very long text that should be cut off." fully visible

D. An empty box with no text

Solution

1. Step 1: Analyze container width and truncate class

   The container has fixed width w-32 and truncate which cuts off overflow text with ellipsis.

2. Step 2: Predict visible text

   Text longer than container width is cut and ends with (…) showing partial text.

3. Final Answer:

   "This is a very long text that shoul…" with an ellipsis at the end -> Option A

4. Quick Check:

   Fixed width + truncate = partial text + dots [OK]

Hint: Fixed width + truncate = text ends with dots [OK]

Common Mistakes:

• Expecting full text to show without wrapping
• Thinking text wraps instead of truncates
• Assuming empty box means truncation

4. You want to truncate text but it is not working. Which Tailwind class is likely missing or incorrect?

medium

A. Missing a fixed width or max-width class on the container

B. Using truncate without text-center

C. Adding overflow-visible to the container

D. Using font-bold on the text

Solution

1. Step 1: Understand truncation requirements

   Truncation needs a fixed width or max-width to limit container size; otherwise text won't cut off.

2. Step 2: Identify common mistakes

   Missing width means text expands fully. Options B, C, D do not affect truncation as directly.

3. Final Answer:

   Missing a fixed width or max-width class on the container -> Option A

4. Quick Check:

   Width needed for truncate to work [OK]

Hint: Check container width if truncate fails [OK]

Common Mistakes:

• Forgetting to set container width or max-width
• Adding overflow-visible which disables truncation
• Confusing text alignment with truncation

5. You have a card with a title that might be very long. You want to truncate the title with an ellipsis but also ensure screen readers can read the full title. Which Tailwind and HTML approach is best?

hard

A. Wrap the title in a <marquee> tag with truncate

B. Use truncate and hide the full text with display:none

C. Use truncate on the title and add aria-label with full text on the same element

D. Use truncate and add a tooltip with the full text using title attribute

Solution

1. Step 1: Understand accessibility needs

   Screen readers need full text, so use aria-label with full title on truncated element.

2. Step 2: Evaluate options for best practice

   Use truncate on the title and add aria-label with full text on the same element uses truncate visually and aria-label for accessibility, which is correct. Use truncate and add a tooltip with the full text using title attribute is helpful but less reliable for screen readers.

3. Final Answer:

   Use <code>truncate</code> on the title and add <code>aria-label</code> with full text on the same element -> Option C

4. Quick Check:

   Truncate + aria-label = visible dots + accessible full text [OK]

Hint: Add aria-label with full text for accessibility [OK]

Common Mistakes:

• Hiding full text with display:none removes it from screen readers
• Using deprecated tags like marquee
• Relying only on title attribute for accessibility