Text wrapping and overflow in Bootsrap - Performance & Optimization

Performance: Text wrapping and overflow

MEDIUM IMPACT

This affects how text content is displayed and how the browser handles layout and repaint when text overflows or wraps.

Handling long text inside a container without breaking layout

Bootsrap

<div class="container" style="width: 200px;">
  <p class="text-break">ThisIsAReallyLongWordThatDoesNotWrapAndCausesOverflow</p>
</div>

Using Bootstrap's text-break class forces word breaks to prevent overflow and layout shifts.

📈 Performance Gainreduces layout shifts and repaint cost, improving CLS

Handling long text inside a container without breaking layout

Bootsrap

<div class="container" style="width: 200px;">
  <p>ThisIsAReallyLongWordThatDoesNotWrapAndCausesOverflow</p>
</div>

Long unbroken text causes horizontal overflow and forces scroll or layout shift.

📉 Performance Costtriggers layout shifts (CLS) and forces browser to repaint on resize

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Long unbroken text without wrapping	Minimal	Multiple on resize	High due to overflow repaint	[X] Bad
Using text-break to wrap long words	Minimal	Single initial	Low paint cost	[OK] Good
No wrapping with overflow visible	Minimal	Multiple on resize	High paint and scroll cost	[X] Bad
Using text-truncate to clip overflow	Minimal	Single initial	Low paint cost	[OK] Good

Rendering Pipeline

Text wrapping and overflow affect the Layout and Paint stages because the browser must calculate text size and container boundaries, then paint visible text accordingly.

→Layout

→Paint

→Composite

⚠️ BottleneckLayout stage is most expensive due to recalculating sizes and positions when text overflows or wraps.

Core Web Vital Affected

CLS

This affects how text content is displayed and how the browser handles layout and repaint when text overflows or wraps.

Optimization Tips

1Use word-break or Bootstrap's text-break to wrap long words and avoid overflow.

2Use text-truncate to clip overflowing text and prevent layout shifts.

3Avoid white-space: nowrap with visible overflow to reduce layout reflows and CLS.

Performance Quiz - 3 Questions

What is the main performance problem caused by long unbroken text inside a small container?

A It improves paint speed.

B It reduces the bundle size.

C It causes layout shifts and forces multiple reflows.

D It disables browser caching.

DevTools: Performance

How to check: Open DevTools > Performance tab > Record while resizing or interacting with text containers > Look for Layout and Paint events.

What to look for: High frequency of Layout or Paint events indicates costly reflows or repaints due to text overflow or wrapping issues.

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