Text wrapping and overflow in Bootsrap - Browser Rendering Trace

Render Flow - Text wrapping and overflow

Load HTML content

↓

Parse text nodes

↓

Apply CSS styles for wrapping and overflow

↓

Calculate line breaks

↓

Render visible text lines

↓

Handle overflow behavior

↓

Paint text on screen

The browser reads the text content, applies CSS rules for wrapping and overflow, calculates where lines break, and then paints the visible text. If text is too long, overflow rules decide if it wraps, clips, or shows scrollbars.

Render Steps - 3 Steps

Code Added:width: 15rem;

Before

[______________________________]
| This is a very long text that will demonstrate how text wrapping and overflow behave in a Bootstrap styled container. |
[______________________________]

→

After

[_______________]
| This is a very long text that will demonstrate how text wrapping and overflow behave in a Bootstrap styled container. |
[_______________]

Setting a fixed width narrows the container, so the long text no longer fits in one line and will need wrapping or overflow handling.

🔧 Browser Action:Triggers layout recalculation and reflow due to width constraint.

Code Sample

A narrow box with a border containing long text that wraps onto new lines and clips overflow with an ellipsis if it doesn't fit.

Bootsrap

<div class="text-container">
  This is a very long text that will demonstrate how text wrapping and overflow behave in a Bootstrap styled container.
</div>

Bootsrap

.text-container {
  width: 15rem;
  border: 1px solid #333;
  padding: 0.5rem;
  white-space: normal;
  overflow-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

Render Quiz - 3 Questions

After applying step 2, how does the text appear inside the container?

A Text breaks into multiple lines inside the container

B Text stays in one long line causing horizontal scroll

C Text is clipped with ellipsis at the end

D Text disappears completely

Common Confusions - 2 Topics

Why doesn't my long word break and causes horizontal scroll?

Without 'overflow-wrap: break-word', long words won't break and overflow the container causing scroll. See step 2 where adding break-word allows wrapping.

💡 Use 'overflow-wrap: break-word' to break long words inside narrow containers.

Why is the ellipsis not showing even though text is clipped?

Ellipsis only works if 'white-space: nowrap' or single line text is used. In step 3, ellipsis appears because overflow is hidden and text is clipped on one line.

💡 Ellipsis needs no wrapping and hidden overflow to show properly.

Property Reference

Property	Value Applied	Visual Effect	Common Use
white-space	normal	Text wraps onto new lines at spaces	Default wrapping behavior
white-space	nowrap	Text stays on one line, no wrapping	Prevent line breaks
overflow-wrap	break-word	Long words break to next line to avoid overflow	Handle long words or URLs
overflow	hidden	Content outside container is clipped	Hide overflow content
text-overflow	ellipsis	Shows '...' for clipped text	Indicate clipped text visually

Concept Snapshot

Text wrapping controls how text breaks into lines. Use 'white-space: normal' and 'overflow-wrap: break-word' to wrap text. Overflow properties like 'hidden' and 'ellipsis' clip and indicate overflow. Fixed width containers show wrapping and overflow effects clearly. Ellipsis requires no wrapping and hidden overflow to appear.

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