how to make text automatically go to the next line in bootstrap column

Question

I have this row and column inside container

<div class="container">
    <div class="row">
        <div class="col-md-4" >
            <h1>About</h1>
<p>asdasdsadasdasdassdasdasdadassssssssssssssssssssssssssssssssssssssssssss</p>
        </div>  
    </div>
</div>

How can i make it go to the next line when it reach the end of the column?

Answer 1

Use word-wrap: break-word

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

.break-text p {
  word-wrap: break-word;
}

<div class="container break-text">
  <div class="row">
    <div class="col-xs-4">
      <h1>About</h1>
      <p>asdasdsadasdasdassdasdasdadassssssssssssssssssssssssssssssssssssssssssss</p>
    </div>  
  </div>
</div>

Answer 2

Just add to your CSS

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

Then to your paragraph add the class

 <p class="word-wrap">asdasdsadasdasdassdasdasdadassssssssssssssssssssssssssssssssssssssssssss</p>

Another option is to apply it to the whole site or all paragraphs, for example:

body {word-wrap: break-word;}
OR
p{word-wrap: break-word;}