Question: I have this code:

```
<div class="well details-form">
<div class="row">
        <div class="col-md-6">Test:</div>
        <div class="col-md-6" style="white-space: pre-wrap">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</div>
    </div>

</div> 

```

I am trying to get the `div` that contains the long text to wrap. That is just a test, but the length *could* be the same, hence the need for wrapping.

How do I get this to wrap?

Here is a [Bootply](http://www.bootply.com/vc27XRYk9l).

Any help is appreciated.

Answer: 
Use `word-break: break-all` instead of `white-space: pre-wrap`.

Read more at MDN: <https://developer.mozilla.org/en-US/docs/Web/CSS/word-break>

```css
.details-form {
  width: 70%;
  margin: auto;
}
```

```html
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div class="well details-form">
  <div class="row">
    <div class="col-md-6">Test:</div>
    <div class="col-md-6" style="
  word-break: break-all;
">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</div>
  </div>
</div>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
```
The style `style="white-space: pre-wrap"` only works where there's a space encountered in the text.