How to force a line break in a long word in a DIV?
HtmlCssLine BreaksHtml Problem Overview
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?
Html Solutions
Solution 1 - Html
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.
Solution 2 - Html
I am not sure about the browser compatibility
word-break: break-all;
Also you can use the <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.
Solution 3 - Html
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/
.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;
}
Solution 4 - Html
I was just Googling the same issue, and posted my final solution https://stackoverflow.com/a/20206221/195835">HERE</a>;. It's relevant to this question too.
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). https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout">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 */
}
Solution 5 - Html
​
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.
Solution 6 - Html
Found that using the following worked across most major browsers (Chrome, IE, Safari iOS/OSX) except Firefox (v50.0.2) when using flexbox 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.
Solution 7 - Html
Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks
.pre-wrap {
white-space: pre-wrap;
word-break: break-word;
}
DEMO
td {
word-break: break-word;
white-space: pre-wrap;
-moz-white-space: pre-wrap;
}
table {
width: 100px;
border: 1px solid black;
display: block;
}
<table>
<tr><th>list</th>
<td>
1.longtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtext
2.breaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreakline
</td>
</tr>
</table>
Solution 8 - Html
CSS word-wrap:break-word;
, tested in FireFox 3.6.3
Solution 9 - Html
Remove white-space: nowrap
, if there is any.
Implement:
white-space: inherit;
word-break: break-word;
Solution 10 - Html
I solved my problem with code below.
display: table-caption;
Solution 11 - Html
First you should identify the width of your element. E.g:
#sampleDiv{
width: 80%;
word-wrap:break-word;
}
<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
so that when the text reaches the element width, it will be broken down into lines.
Solution 12 - Html
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;
Solution 13 - Html
As mentioned in @davidcondrey's reply, there is not just the ZWSP, but also the SHY ­ ­
that can be used in very long, constructed words (think German or Dutch) that have to be broken on the spot you want it to be.
Invisible, but it gives a hyphen the moment it's needed, thus keeping both word connected and line filled to the utmost.
That way the word luchthavenpolitieagent might be noted as lucht­haven­politie­agent
which gives longer parts than the syllables of the word.
Though I never read anything official about it, these soft hyphens manage to get higher priority in browsers than the official hyphens in the single words of the construct (if they have some extension for it at all).
In practice, no browser is capable of breaking such a long, constructed word by itself; on smaller screens resulting in a new line for it, or in some cases even a one-word-line (like when two of those constructed words follow up).
FYI: it's Dutch for airport police officer
Solution 14 - Html
word-break: normal seems better to use than word-break: break-word because break-word breaks initials such as EN
word-break: normal
Solution 15 - Html
.word-break {
word-break: keep-all;
word-wrap: break-word;
}
Solution 16 - Html
You can use a grid system for this.
<div class="container" style="background-color: green; width: 200px; height: 300px;">
<div class="row">Thisisatest.Thisisatest.Thisisatest.</div>
<div class="row">Thisisatest.Thisisatest.Thisisatest.</div>
</div>
Solution 17 - Html
Do this:
<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
#sampleDiv{
overflow-wrap: break-word;
}
Solution 18 - Html
just try this in our style
white-space: normal;