Text overflow and truncation in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to truncate the text with an ellipsis when it overflows.

Tailwind

<div class="w-48 [1]">This is a very long text that should be truncated.</div>

Drag options to blanks, or click blank then click option'

Atruncate

Bwhitespace-nowrap

Ctext-ellipsis

Doverflow-hidden

Attempts:

3 left

💡 Hint

Common Mistakes

Using only overflow-hidden without preventing wrapping.

Using text-ellipsis alone which is not a Tailwind class.

Forgetting to set whitespace-nowrap.

The truncate class in Tailwind applies overflow-hidden, whitespace-nowrap, and text-overflow: ellipsis to truncate overflowing text with an ellipsis.

2fill in blank

medium

Complete the code to prevent the text from wrapping to the next line.

Tailwind

<p class="[1] w-64">This text should stay on one line and overflow if too long.</p>

Drag options to blanks, or click blank then click option'

Abreak-words

Boverflow-hidden

Ctruncate

Dwhitespace-nowrap

Attempts:

3 left

💡 Hint

Common Mistakes

Using truncate without whitespace-nowrap.

Using break-words which allows wrapping.

Using overflow-hidden which hides overflow but doesn't prevent wrapping.

The whitespace-nowrap class prevents text from wrapping to the next line, keeping it on a single line.

3fill in blank

hard

Fix the error in the code to correctly truncate the text with ellipsis.

Tailwind

<span class="w-40 whitespace-normal [1]">This text should be truncated but it is wrapping instead.</span>

Drag options to blanks, or click blank then click option'

Aoverflow-visible

Btruncate

Coverflow-hidden

Dbreak-normal

Attempts:

3 left

💡 Hint

Common Mistakes

Keeping whitespace-normal which allows wrapping.

Using overflow-visible which shows overflow instead of hiding it.

Using overflow-hidden alone without preventing wrapping.

The truncate class applies overflow-hidden, whitespace-nowrap, and text-overflow: ellipsis. Using whitespace-normal allows wrapping, so replacing it with truncate fixes the issue.

4fill in blank

hard

Fill both blanks to create a box that truncates text with ellipsis and prevents wrapping.

Tailwind

<div class="w-56 [1] [2]">This is a long text that should be truncated with ellipsis.</div>

Drag options to blanks, or click blank then click option'

Aoverflow-hidden

Bwhitespace-nowrap

Ctruncate

Dbreak-words

Attempts:

3 left

💡 Hint

Common Mistakes

Using truncate alone when asked to fill both blanks.

Using break-words which allows wrapping.

Using overflow-visible which shows overflow.

To truncate text manually, you need overflow-hidden to hide overflow and whitespace-nowrap to prevent wrapping. The truncate class combines these but here we fill them separately.

5fill in blank

hard

Fill all three blanks to create a responsive truncated text box with ellipsis that never wraps.

Tailwind

<p class="[1] [2] max-w-xs [3]">This paragraph will truncate text with ellipsis on small screens.</p>

Drag options to blanks, or click blank then click option'

Aoverflow-hidden

Bwhitespace-nowrap

Ctruncate

Dbreak-normal

Attempts:

3 left

💡 Hint

Common Mistakes

Using break-normal which allows wrapping.

Omitting overflow-hidden causing visible overflow.

Omitting whitespace-nowrap causing wrapping.

The truncate class (BLANK_1) applies overflow-hidden and whitespace-nowrap internally, but here we add them explicitly (BLANK_2 and BLANK_3) to emphasize the effect. max-w-xs limits width for responsiveness.