Text wrapping and overflow in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the Bootstrap class .text-wrap do?

The <code>.text-wrap</code> class allows text to wrap onto the next line instead of overflowing outside its container.

beginner

How does the Bootstrap class .text-nowrap affect text?

The <code>.text-nowrap</code> class prevents text from wrapping. All text stays on one line and may overflow its container if too long.

beginner

What is the purpose of the Bootstrap class .text-truncate?

The <code>.text-truncate</code> class shortens text that is too long to fit in its container by adding an ellipsis (...) at the end.

intermediate

Which CSS property does Bootstrap's .text-truncate rely on to show ellipsis?

It uses the CSS property text-overflow: ellipsis; combined with overflow: hidden; and white-space: nowrap;.

beginner

Why is controlling text overflow important in web design?

Controlling text overflow keeps layouts neat and readable. It prevents text from spilling outside containers, which can break design and confuse users.

Which Bootstrap class allows text to wrap onto multiple lines?

A .text-nowrap

B .text-truncate

C .text-wrap

D .text-break

The .text-wrap class enables text to wrap onto the next line.

What happens when you use .text-nowrap on a long text?

A Text wraps to next line

B Text becomes bold

C Text is truncated with ellipsis

D Text stays on one line and may overflow

.text-nowrap keeps text on one line, which can cause overflow.

Which class would you use to shorten overflowing text with an ellipsis?

A .text-truncate

B .text-nowrap

C .text-wrap

D .text-break

.text-truncate shortens text and adds an ellipsis.

What CSS property is essential for showing ellipsis in truncated text?

A text-overflow: ellipsis;

B overflow: visible;

C white-space: normal;

D display: block;

text-overflow: ellipsis; shows the three dots for truncated text.

Why should you avoid letting text overflow its container?

A It improves page loading speed

B It keeps the layout clean and readable

C It makes text bold

D It changes font color

Preventing overflow keeps the page neat and easy to read.

Explain how Bootstrap helps manage text wrapping and overflow in layouts.

Think about how text behaves when it is too long for its container.

Describe the CSS properties behind Bootstrap's text truncation feature.

These properties work together to hide overflow and show dots.