JulianJ JulianJ - 22 days ago 9
CSS Question

How to keep the text inside the div?

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

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>