Html – How to force a line break in a long word in a DIV

csshtmlline-breaks

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?

Best Answer

~~Use word-wrap:break-word;~~

~~It even works in IE6, which is a pleasant surprise.~~

word-wrap: break-word has been replaced with overflow-wrap: break-word; which works in every modern browser. IE, being a dead browser, will forever rely on the deprecated and non-standard word-wrap instead.

Existing uses of word-wrap today still work as it is an alias for overflow-wrap per the specification.

Related Solutions

Python – How to do a line break (line continuation) in Python

What is the line? You can just have arguments on the next line without any problems:

a = dostuff(blahblah1, blahblah2, blahblah3, blahblah4, blahblah5, 
            blahblah6, blahblah7)

Otherwise you can do something like this:

if (a == True and
    b == False):

or with explicit line break:

if a == True and \
   b == False:

Check the style guide for more information.

Using parentheses, your example can be written over multiple lines:

a = ('1' + '2' + '3' +
    '4' + '5')

The same effect can be obtained using explicit line break:

a = '1' + '2' + '3' + \
    '4' + '5'

Note that the style guide says that using the implicit continuation with parentheses is preferred, but in this particular case just adding parentheses around your expression is probably the wrong way to go.

Html – How to make a div not larger than its contents

The solution is to set your div to display: inline-block.

Best Answer

Related Solutions

Python – How to do a line break (line continuation) in Python

Html – How to make a div not larger than its contents

Related Topic