Text wrapping and overflow in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

How does Bootstrap handle text overflow with utility classes?

Which Bootstrap utility class will correctly truncate text with an ellipsis when it overflows its container?

Bootsrap

<div class="text-truncate" style="width: 150px;">This is a very long text that should be truncated.</div>

A text-truncate

B text-wrap

C text-break

D text-nowrap

💡 Hint

Look for the class that adds ellipsis when text is too long.

The text-truncate class in Bootstrap applies overflow: hidden, text-overflow: ellipsis, and white-space: nowrap to truncate overflowing text with an ellipsis.

📝 Syntax

intermediate

Which CSS property prevents text wrapping in Bootstrap?

Given the following HTML, which CSS property is applied by Bootstrap's text-nowrap class to prevent text from wrapping?

Bootsrap

<p class="text-nowrap">This text will not wrap to the next line.</p>

A word-break: break-all;

B overflow-wrap: break-word;

C text-overflow: ellipsis;

D white-space: nowrap;

💡 Hint

Think about which property stops text from breaking to a new line.

The text-nowrap class applies white-space: nowrap; which prevents the text from wrapping to the next line.

❓ rendering

advanced

What will be the visual result of this Bootstrap text wrapping example?

Consider this HTML snippet:

<div class="text-break" style="width: 100px; border: 1px solid black;">Supercalifragilisticexpialidocious</div>

What will you see in the browser?

Bootsrap

<div class="text-break" style="width: 100px; border: 1px solid black;">Supercalifragilisticexpialidocious</div>

A The long word breaks and wraps onto multiple lines inside the box.

B The text overflows the box horizontally without wrapping.

C The text is truncated with an ellipsis at the end.

D The text is hidden completely due to overflow.

💡 Hint

The class text-break allows breaking inside words to wrap.

The text-break class applies word-break: break-word; which forces long words to break and wrap inside the container.

❓ selector

advanced

Which Bootstrap class combination ensures text wraps but does not overflow?

You want text inside a fixed-width container to wrap normally but never overflow outside the container. Which combination of Bootstrap classes achieves this?

Bootsrap

<div class="???" style="width: 200px; border: 1px solid #000;">This is a long text that should wrap properly inside the box without overflow.</div>

A text-nowrap text-truncate

B text-wrap text-truncate

C text-wrap

D text-nowrap

💡 Hint

Wrapping means breaking lines normally, no truncation or no nowrap.

The text-wrap class applies overflow-wrap: break-word; allowing text to wrap inside the container without overflow. Avoid text-nowrap or text-truncate which prevent wrapping or truncate text.

❓ accessibility

expert

How to ensure accessible text truncation with Bootstrap?

You use text-truncate to shorten long text with ellipsis. What should you add to keep the full text accessible to screen readers and keyboard users?

Bootsrap

<div class="text-truncate" style="width: 150px;">This is a very long text that should be truncated.</div>

A No additional attributes are needed; truncation is accessible by default.

B Add <code>aria-label</code> with the full text to the div.

C Use <code>role="presentation"</code> to hide text from screen readers.

D Add <code>tabindex="-1"</code> to prevent keyboard focus.

💡 Hint

Think about how to provide full text to assistive technologies when visible text is cut off.

When text is truncated visually, adding aria-label with the full text ensures screen readers can read the complete content. This improves accessibility for users relying on assistive technologies.

Practice

1. Which Bootstrap class allows text to wrap normally within its container?

easy

A. .text-break

B. .text-nowrap

C. .text-truncate

D. .text-wrap

Solution

1. Step 1: Understand text wrapping classes in Bootstrap

   Bootstrap provides .text-wrap to allow normal text wrapping inside containers.

2. Step 2: Identify the class that enables wrapping

   .text-nowrap prevents wrapping, and .text-truncate truncates text with ellipsis. So, .text-wrap is the correct choice.

3. Final Answer:

   .text-wrap -> Option D

4. Quick Check:

   Text wrapping = .text-wrap [OK]

Hint: Wrap text? Use .text-wrap class [OK]

Common Mistakes:

• Confusing .text-nowrap as wrapping text
• Thinking .text-truncate wraps text
• Assuming .text-break is for wrapping

2. Which of the following is the correct Bootstrap class to prevent text from wrapping?

easy

A. .text-wrap

B. .text-nowrap

C. .text-truncate

D. .text-break

Solution

1. Step 1: Recall Bootstrap classes for text wrapping control

   .text-nowrap is designed to stop text from wrapping onto the next line.

2. Step 2: Confirm the class that disables wrapping

   .text-wrap allows wrapping, .text-truncate truncates text, so .text-nowrap is the correct class to prevent wrapping.

3. Final Answer:

   .text-nowrap -> Option B

4. Quick Check:

   No wrap = .text-nowrap [OK]

Hint: Stop wrapping? Use .text-nowrap class [OK]

Common Mistakes:

• Using .text-wrap to stop wrapping
• Confusing .text-truncate with no wrap
• Assuming .text-break stops wrapping

3. What will be the visual result of this HTML snippet using Bootstrap?

<div class='text-truncate' style='width: 8rem;'>This is a very long text that should be cut off.</div>

medium

A. The text will be cut off with an ellipsis (...) at the end within 8rem width.

B. The text will stay on one line and overflow outside the box.

C. The full text will wrap into multiple lines within 8rem width.

D. The text will break words to fit inside the box without ellipsis.

Solution

1. Step 1: Understand .text-truncate behavior

   The .text-truncate class in Bootstrap truncates text that overflows its container and adds an ellipsis.

2. Step 2: Analyze the style and effect

   The container width is limited to 8rem, so the long text will not fit and will be cut off with an ellipsis on one line.

3. Final Answer:

   Text cut off with ellipsis within 8rem width -> Option A

4. Quick Check:

   .text-truncate = ellipsis cut off [OK]

Hint: Use .text-truncate for ellipsis on overflow [OK]

Common Mistakes:

• Expecting text to wrap with .text-truncate
• Thinking text overflows visibly without cut off
• Confusing .text-truncate with .text-nowrap

4. You want to prevent text wrapping but also show an ellipsis if the text is too long. Which Bootstrap classes combination is correct?

medium

A. .text-nowrap .text-truncate

B. .text-wrap .text-truncate

C. .text-nowrap .text-wrap

D. .text-truncate .text-wrap

Solution

1. Step 1: Identify classes for no wrap and truncation

   .text-nowrap stops wrapping, and .text-truncate adds ellipsis for overflow.

2. Step 2: Combine classes correctly

   Using .text-nowrap .text-truncate together prevents wrapping and truncates overflow with ellipsis.

3. Final Answer:

   .text-nowrap .text-truncate -> Option A

4. Quick Check:

   No wrap + ellipsis = .text-nowrap .text-truncate [OK]

Hint: Combine .text-nowrap and .text-truncate for no wrap + ellipsis [OK]

Common Mistakes:

• Using .text-wrap with .text-truncate (conflicting)
• Not combining classes, only using one
• Mixing order incorrectly

5. You have a responsive card with a title that might be very long. You want the title to stay on one line, show ellipsis if too long, and be accessible for screen readers. Which Bootstrap and HTML approach is best?

hard

A. <h5 class='text-nowrap text-truncate' style='max-width: 100%;'>Long title</h5>

B. <h5 class='text-wrap'>Long title</h5>

C. <h5 class='text-nowrap text-truncate' style='max-width: 15rem;' title='Long title'>Long title</h5>

D. <h5 class='text-truncate' style='max-width: 15rem;'>Long title</h5>

Solution

1. Step 1: Ensure no wrapping and truncation

   Use .text-nowrap to prevent wrapping and .text-truncate to add ellipsis for overflow.

2. Step 2: Set a max-width and add accessibility

   Limit width with max-width: 15rem; so truncation works. Add title attribute to show full text on hover for screen readers and keyboard users.

3. Final Answer:

   <h5 class='text-nowrap text-truncate' style='max-width: 15rem;' title='Long title'>Long title</h5> -> Option C

4. Quick Check:

   No wrap + ellipsis + accessibility = <h5 class='text-nowrap text-truncate' style='max-width: 15rem;' title='Long title'>Long title</h5> [OK]

Hint: Use .text-nowrap, .text-truncate, max-width, and title for accessibility [OK]

Common Mistakes:

• Not setting max-width so truncation fails
• Missing title attribute for accessibility
• Using .text-wrap which allows wrapping