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

问题:

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?

回答1:

Use word-wrap:break-word;

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

回答2:

I am not sure about the browser compatability

word-break: break-all;

Also you can use <wbr> tag

<wbr> (word break) means: "The browser may insert a line break here, if it wishes." It the browser does not think a line break necessary nothing happens.

回答3:

This could be added to the accepted answer for a 'cross-browser' solution.

Sources:

• http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
• http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

 CSS

.your_element{
    -ms-word-break: break-all;
    word-break: break-all;

 /* Non standard for webkit */
     word-break: break-word;

    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}

回答4:

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.

回答5:

​ 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.

回答6:

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.

回答7:

CSS word-wrap:break-word;, tested in FireFox 3.6.3

回答8:

I solved my problem with code below.

display: table-caption;

回答9:

First you should identify the width of your element. Eg:

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

#sampleDiv{
  width: 80%;
  word-wrap:break-word;
}

so that when the text reaches the element width, it will be broken down into lines.

回答10:

From MDN:

The overflow-wrap CSS property specifies whether or not the browser should insert line breaks within words to prevent text from overflowing its content box.

In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.

So you can use:

overflow-wrap: break-word;

Can I use?

回答11:

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

Implement:

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

回答12:

Do this:

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

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

回答13:

just try this in our style

white-space: normal;