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>

Possible duplicate of [How to force a line break in a loooooong word in a DIV?](http://stackoverflow.com/questions/3058866/how-to-force-a-line-break-in-a-loooooong-word-in-a-div) — Dez, Nov 19 '16 at 10:00

score 9 · Accepted Answer · answered Nov 19 '16 at 09:50

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>

score 1 · Answer 2 · answered Nov 19 '16 at 09:52

1

give CSS to

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

Here is updated JSFiddle

answered Nov 19 '16 at 09:52

Bhavin Shah

2,462
4
22
35

score 0 · Answer 3 · answered Nov 19 '16 at 10:03

This is a purely hypothetical question - on a real website you will have real Text consisting of real words which are much shorter than your example phantasy word/s, and they will fit nicely into that div since the text will be broken at word ends, i.e. spaces. Just use Same real text and you'll see.

How to keep the text inside the div?

3 Answers3