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

Question

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

<div style="background-color: green; width: 200px; height: 300px;">

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

</div>

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

just try this in our style

white-space: normal;

Answer 2

​ is the HTML entity for a unicode character called the zero-width space (ZWSP) which is an invisible character which specifies a line-break opportunity. Similarly the hyphen's purpose is to specify a line-break opportunity within a word boundary.

Answer 3

Found that using the following worked across most major browsers (Chrome, IE, Safari iOS/OSX) except Firefox (v50.0.2) when using flex-box and relying on width: auto.

.your_element {
    word-wrap: break-word;   
    overflow-wrap: break-word;
    word-break: break-word;
}

note: you may need to add browser vendor prefixes if you are not using an autoprefixer.

Another thing to watch out for is text using   for spacing can cause line breaks mid-word.

Answer 4

Remove white-space: nowrap, if there is any.

Implement:

    white-space: inherit;
    word-break: break-word;

Answer 5

Do this:

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

#sampleDiv{
   overflow-wrap: break-word;
}

Answer 6

I was just Googling the same issue, and posted my final solution HERE. It's relevant to this question too, so I hope you don't mind the repost.

You can do this easily with a DIV by giving it the style word-wrap: break-word (and you may need to set its width, too).

div {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
    width: 100%;
}

However, for tables, you also need to apply: table-layout: fixed. This means the columns widths are no longer fluid, but are defined based on the widths of the columns in the first row only (or via specified widths). Read more here.

Sample code:

table {
    table-layout: fixed;
    width: 100%;
}

table td {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
}

Hope that helps somebody.