Bootstrap 3.3.7网格布局文本无法正常换行重叠问题求助

Hey there, let's sort out that Bootstrap 3 grid text overlap issue you're dealing with! The problem is pretty straightforward once you look at your content: those super long, unbroken strings of characters in your <p> tags are causing the trouble. Browsers don't automatically wrap text that has no spaces, hyphens, or natural break points—so it spills out of the column container and overlaps with adjacent columns. Bootstrap's grid columns don't handle this edge case by default.

Here are a few simple fixes you can implement: #

• Use Bootstrap's built-in .word-wrap utility class
  Bootstrap 3 includes a .word-wrap class that tells the browser to break long words at any point to fit the container. Just add it to your column divs (or directly to the <p> elements):

  <div class="container">
    <div class="row">
      <div class="col-md-8">
        <p>ROW 1</p>
      </div>
      <div class="col-md-4">
        <p>ROW 1.1</p>
      </div>
    </div>
    <br>
    <div class="row">
      <div class="col-md-3 word-wrap">
        <p>ROW 2 DASKLLLLDASSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS</p>
      </div>
      <div class="col-md-3 word-wrap">
        <p>ROW 2.1 DASKLLLLDASSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS</p>
      </div>
      <div class="col-md-3 word-wrap">
        <p>ROW 2.2 DASKLLLLDASSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS</p>
      </div>
      <div class="col-md-3 word-wrap">
        <p>ROW 2.3 DASKLLLLDASSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS</p>
      </div>
    </div>
  </div>
  

• Add custom CSS for more control
  If you want to tweak how the text breaks, create a custom CSS class. For example:

  .break-long-text {
    /* Breaks words at natural boundaries when possible */
    word-wrap: break-word;
    /* OR use this to break mid-character regardless of word structure */
    /* word-break: break-all; */
  }
  

  Then apply it to your columns:

  <div class="col-md-3 break-long-text">
    <p>ROW 2 DASKLLLLDASSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS</p>
  </div>
  

• Insert soft hyphens (if you can edit the text)
  If you have control over the content, add ­ (a soft hyphen) in places where you want the long string to break. This lets the browser know it can split the text there if needed:

  <p>ROW 2 DASKLLLLDASSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS&shy;</p>
  

Any of these approaches will force the long text to wrap within your Bootstrap column boundaries, fixing the overlap issue.

内容的提问来源于stack exchange，提问作者Nerdo