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.