How to keep the text inside the div?

Question

I have a page that shows text retrieved from a mysql database.

I can't figure out why I cannot get the text to display as a block of text within the div. Instead it overflows the div. (I'm using bootstrap 3) Here is a fiddle

<div class="container">
  <div class="row">
    <!---MAIN COLUMN------>
    <div class="col-xs-12 col-md-6 col-sm-8 col-lg-6 col-centered">
      <h2>
        How to keep the text inside the div?
      </h2>

      <div class="mytext">
        fdsnkfhskghkgskghsdkghdskghdsklhgkdlsghds
        khgkdshgdksghdsklghdskg hkdslhgkdshgkdshgkdshgkd
        shgksdlhgksdhgkdslhgkdshgkdshgkdshgksd hgkldshgkd
        shgkldshgkhdsgkhdskghdskhgkdlshgkdshgkldsh
        gkdshgklhds kghdskghdskl
        <small>
        </small>

      </div>

    </div>
  </div>
</div>

Answer 1

Used word-break:break-all; to break the word

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

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <!---MAIN COLUMN------>
    <div class="col-xs-12 col-md-6 col-sm-8 col-lg-6 col-centered">
      <h2>
        How to keep the text inside the div?
      </h2>

      <div class="mytext">
        fdsnkfhskghkgskghsdkghdskghdsklhgkdlsghds
        khgkdshgdksghdsklghdskg hkdslhgkdshgkdshgkdshgkd
        shgksdlhgksdhgkdslhgkdshgkdshgkdshgksd hgkldshgkd
        shgkldshgkhdsgkhdskghdskhgkdlshgkdshgkldsh
        gkdshgklhds kghdskghdskl
        <small>
        </small>

      </div>

    </div>
  </div>
</div>

Answer 2

give CSS to

.mytext{
  width:200px;
  word-wrap:break-word;
  border:thin black solid;
}

Here is updated JSFiddle