Text wrapping and overflow in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the text wrap inside the container.

Bootsrap

<div class="container [1]">
  This is a very long text that should wrap inside the container instead of overflowing.
</div>

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

Atext-nowrap

Btext-break

Ctext-truncate

Dtext-wrap

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-nowrap which prevents wrapping

Using text-truncate which cuts off text with ellipsis

Using text-wrap which is not a valid Bootstrap class

The text-break class in Bootstrap allows the text to wrap inside the container, preventing overflow by breaking long words.

2fill in blank

medium

Complete the code to prevent text from wrapping and instead show it in one line.

Bootsrap

<div class="container [1]">
  This is a very long text that should stay in one line and not wrap.
</div>

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

Atext-nowrap

Btext-wrap

Ctext-truncate

Dtext-break

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-wrap which allows wrapping

Using text-truncate which cuts off text

Using text-break which breaks words

The text-nowrap class prevents the text from wrapping and keeps it in one line.

3fill in blank

hard

Fix the error in the code to truncate overflowing text with an ellipsis.

Bootsrap

<div class="container [1]" style="width: 200px; white-space: nowrap; overflow: hidden;">
  This is a very long text that should be truncated with an ellipsis.
</div>

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

Atext-truncate

Btext-nowrap

Ctext-wrap

Dtext-break

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-nowrap alone which hides overflow but no ellipsis

Using text-wrap which allows wrapping

Using text-break which breaks words

The text-truncate class adds an ellipsis to overflowing text when combined with nowrap and hidden overflow.

4fill in blank

hard

Fill both blanks to make the text break words and wrap inside the container.

Bootsrap

<div class="container [1] [2]" style="width: 150px;">
  ThisIsAReallyLongWordThatNeedsToBreakAndWrapInsideTheContainer.
</div>

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

Atext-break

Btext-nowrap

Ctext-wrap

Dtext-truncate

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-nowrap which prevents wrapping

Using text-truncate which cuts off text

Using only one of the needed classes

The text-break class breaks long words, and text-wrap allows text to wrap inside the container.

5fill in blank

hard

Fill all three blanks to create a container with fixed width, no wrapping, and truncated text with ellipsis.

Bootsrap

<div class="container [1] [2]" style="width: [3];">
  This is a very long text that should not wrap and show ellipsis if it overflows.
</div>

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

Atext-nowrap

Btext-truncate

C150px

Dtext-wrap

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-wrap which allows wrapping

Not setting a fixed width

Missing either nowrap or truncate class

Use text-nowrap to prevent wrapping, text-truncate to add ellipsis, and set a fixed width like 150px to limit container size.