Text wrapping and overflow in Bootsrap

Introduction

Text wrapping and overflow help keep your webpage neat by controlling how long text fits inside boxes. This stops text from spilling out or breaking your design.

When you have long words or URLs that might break your layout.

When you want to keep text inside a fixed-size box without it spilling over.

When you want to show an ellipsis (...) for text that is too long to fit.

When you want to prevent text from wrapping to the next line.

When you want to make sure your content looks good on small screens.

Syntax

Bootsrap

Use Bootstrap utility classes:

.text-wrap       - allows text to wrap normally
.text-nowrap     - prevents text from wrapping
.text-truncate   - truncates text with an ellipsis if too long

Example:
<div class="text-wrap">Long text here</div>

These classes work by adding CSS rules to control wrapping and overflow.

Use .text-truncate inside a container with a fixed width to see the ellipsis effect.

Examples

This example shows text wrapping inside a fixed width box.

Bootsrap

<div class="text-wrap" style="width: 150px; border: 1px solid #ccc;">
  This is a very long text that will wrap inside the box.
</div>

This example prevents text from wrapping, so it may overflow outside the box.

Bootsrap

<div class="text-nowrap" style="width: 150px; border: 1px solid #ccc;">
  This is a very long text that will not wrap and may overflow.
</div>

This example truncates the text with an ellipsis if it is too long to fit.

Bootsrap

<div class="text-truncate" style="width: 150px; border: 1px solid #ccc; white-space: nowrap; overflow: hidden;">
  This is a very long text that will be cut off with an ellipsis.
</div>

Sample Program

This page shows three boxes demonstrating Bootstrap's text wrapping and overflow utilities. The first wraps text normally, the second prevents wrapping causing overflow, and the third truncates text with an ellipsis.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Text Wrapping and Overflow</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
  <style>
    .box {
      width: 200px;
      border: 1px solid #666;
      margin-bottom: 1rem;
      padding: 0.5rem;
    }
  </style>
</head>
<body>
  <main class="container mt-4">
    <h1>Text Wrapping and Overflow Examples</h1>

    <section>
      <h2>1. Text Wrap (default)</h2>
      <div class="box text-wrap">
        This is a very long text that will wrap inside the box to keep everything neat and readable.
      </div>
    </section>

    <section>
      <h2>2. No Wrap</h2>
      <div class="box text-nowrap">
        This is a very long text that will not wrap and might overflow outside the box.
      </div>
    </section>

    <section>
      <h2>3. Truncate with Ellipsis</h2>
      <div class="box text-truncate" style="white-space: nowrap; overflow: hidden;">
        This is a very long text that will be cut off with an ellipsis if it does not fit.
      </div>
    </section>
  </main>
</body>
</html>

Important Notes

Always test your text on different screen sizes to ensure readability.

Use .text-truncate only inside containers with fixed width or max-width.

Combining white-space: nowrap; and overflow: hidden; is necessary for truncation to work.

Summary

Bootstrap provides simple classes to control text wrapping and overflow.

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

These help keep your webpage clean and readable on all devices.

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