Bootstrap 4 - Column rendered to new line

Question

I've got a tricky problem using bootstrap 4.

In the following example, I have a row with two columns. The first one contains a very long text without any space. The second one contains a small one, specified as "col-auto".

<html>

    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    </head>

    <body>
        <div style="background-color: red; width: 500px;" class="container">
            <div class="row">
                <div class="col">
                    THIS_IS_A_SUPER_LONG_TEXT_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
                </div>
                <div class="col-auto">
                    RIGHT
                </div>
            </div>
        </div>
    </body>

</html>

But, unfortunately, my columns are rendered on two distinct lines, as shown in the example below.

Instead, I would like my text to wrap, and display something like that (without the spaces):

Do you know if this possible? If yes, which CSS property should I apply on which tag? I searched for something like forcing the width:auto attribute to be effective, but I don't know how.

Thanks a lot

Possible duplicate of [How to force a line break in a loooooong word in a DIV?](https://stackoverflow.com/questions/3058866/how-to-force-a-line-break-in-a-loooooong-word-in-a-div) — Lucas Arbex, Oct 02 '19 at 19:31
Possible duplicate of [Break long word with CSS](https://stackoverflow.com/questions/18628038/break-long-word-with-css) — Mike Doe, Oct 02 '19 at 19:31
Add class text-break to your column with the long text. ie:
You second column div should be — Travis Acton, Oct 02 '19 at 19:37
This should work

YOUR BIG TEXT

and for small text
SMALL TEXT — Ranger, Jul 02 '20 at 02:28

score 2 · Answer 1 · answered Oct 02 '19 at 21:07

Use break-word:

Since col will let bootstrap handle the grid automatically this is not achievable with col and the only thing you can do is adding break-word to col class and avoid the text to overflow the parent div.

.col {
  overflow-wrap: break-word;
}

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body>
  <div style="background-color: red; width: 500px;" class="container">
    <div class="row">
      <div class="col">
        THIS_IS_A_SUPER_LONG_TEXT_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
      </div>
      <div class="col-auto">
        RIGHT
      </div>
    </div>
  </div>
</body>

</html>

Use bootstrap col-x-x:

On the other hand, you can achieve it with col-6 and add it to both child div to let the browser now there is two-column with the same height in the same row but since your text is too long you still have to add break-word to the related div to avoid further mess up. For better understanding bootstrap grid and find the better solution to fit your exact need I suggest to read get the bootstrap document from here or w3school document on bootstrap grid system from here. Here's the snippet to let it happen:

div.row>div:first-of-type.col-6 {
  overflow-wrap: break-word;
}

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body>
  <div style="background-color: red;" class="container">
    <div class="row">
      <div class="col-6">
        THIS_IS_A_SUPER_LONG_TEXT_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
      </div>
      <div class="col-6">
        RIGHT
      </div>
    </div>
  </div>
</body>

</html>

NOTE: to avoid further issues I suggest to remove width: 500px; from the parent division.

score 0 · Answer 2 · answered Oct 03 '19 at 15:29

Use bootstrap's .text-break if text is a plain text.

.text-break {
  word-break: break-word !important; // IE & < Edge 18
  overflow-wrap: break-word !important;
}

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body>
  <div style="background-color: red; width: 500px;" class="container">
    <div class="row">
      <div class="col text-break">
        THIS_IS_A_SUPER_LONG_TEXT_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
      </div>
      <div class="col-auto">
        RIGHT
      </div>
    </div>
  </div>
</body>

</html>

If it is preformatted text, text-break does not work. And since bootstrap does not have any class that wraps long preformatted text, you need to write some custom CSS.

.pre-text-wrap  {
  white-space: normal !important;
  word-break: break-all;
}

.pre-text-wrap {
  white-space: normal !important;
  word-break: break-all;
}

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body>
  <div style="background-color: red; width: 500px;" class="container">
    <div class="row">
      <div class="col">
        <pre class="pre-text-wrap">
                     THIS_IS_A_SUPER_LONG_TEXT_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</pre>
      </div>
      <div class="col-auto">
        RIGHT
      </div>
    </div>
  </div>
</body>

</html>

Or you may use bootstrap's .text-wrap and only word-break: break-all;.

.text-break-all {
   word-break: break-all;
}

Bootstrap 4 - Column rendered to new line

2 Answers2