How to force a line break in a loooooong word in a DIV?

Question

Okay, this is really confusing me. I have some content inside of a div like so:

Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.

However, the content overflows the DIV (as expected) because the 'word' is too long.How can I force the browser to 'break' the word where necessary to fit all of the content inside?

Answer 1

This can be done with CSS. Give the containing DIV a word-wrap property and assign it the value: "break-word". Like this:

/* --------CSS Stylesheet---------- */

div {

width: 200px;

height: 300px;

display: block;

background-color:green;

word-wrap: break-word;

}

A JSFiddle example can be found here:

https://jsfiddle.net/0kLt3c1a/