How to word wrap text in HTML?

Try this:

div {
    width: 200px;
    word-wrap: break-word;
}

On bootstrap 3, make sure the white-space is not set as 'nowrap'.

div {
  width: 200px;
  word-break: break-all;
  white-space: normal;
}

You can use a soft hyphen like so:

aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa

This will appear as

aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa

if the containing box isn't big enough, or as

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

if it is.

div {
    /* Set a width for element */
    word-wrap: break-word
}

The 'word-wrap' solution only works in IE and browsers supporting CSS3.

The best cross browser solution is to use your server side language (php or whatever) to locate long strings and place inside them in regular intervals the html entity ​ This entity breaks the long words nicely, and works on all browsers.

e.g.

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa

<p style="word-wrap: break-word; word-break: break-all;">
    Adsdbjf bfsi hisfsifisfsifs shifhsifsifhis aifoweooweoweweof
</p>

I have used bootstrap. My html code looks like ..

<div class="container mt-3" style="width: 100%;">
  <div class="row">
    <div class="col-sm-12 wrap-text">
      <h6>
        text content
      </h6>
    </div>
  </div>
</div>

CSS

.wrap-text {
     text-align:justify;
}

you can use this CSS

p {
  width: min-content;
  min-width: 100%;
}

Try this CSS property -

overflow-wrap: anywhere;

Try this

div {display: inline;}

try:

overflow-wrap: break-word;

Use word-wrap:break-word attribute along with required width. Mainly, put the width in pixels, not in percentages.

width: 200px;
word-wrap: break-word;