0
0
Bootsrapmarkup~5 mins

Text wrapping and overflow in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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>
OutputSuccess
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.