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?
Pardeep Jain
80k36 gold badges158 silver badges213 bronze badges
asked Jun 17, 2010 at 4:26
Nathan OsmanNathan Osman
68.8k71 gold badges250 silver badges350 bronze badges
2
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.
TylerH
21.1k59 gold badges74 silver badges93 bronze badges
answered Jun 17, 2010 at 5:36
5
I am not sure about the browser compatibility
word-break: break-all;
Also you can use the
tag
[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.
TylerH
21.1k59 gold badges74 silver badges93 bronze badges
answered Jun 17, 2010 at 4:29
rahulrahul
181k49 gold badges230 silver badges261 bronze badges
6
I was just Googling the same issue, and posted my final solution HERE. 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]. 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 */
}
TylerH
21.1k59 gold badges74 silver badges93 bronze badges
answered Nov 26, 2013 at 1:01
Simon EastSimon East
52.5k17 gold badges135 silver badges130 bronze badges
3
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.
answered Mar 10, 2015 at 8:25
davidcondreydavidcondrey
32.6k15 gold badges111 silver badges134 bronze badges
2
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.
TylerH
21.1k59 gold badges74 silver badges93 bronze badges
answered Dec 2, 2016 at 1:14
AndrewAndrew
5,3475 gold badges35 silver badges39 bronze badges
1
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;
}
list
1.longtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtext
2.breaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreakline
TylerH
21.1k59 gold badges74 silver badges93 bronze badges
answered Feb 26, 2019 at 8:52
Tính Ngô QuangTính Ngô Quang
4,0461 gold badge30 silver badges32 bronze badges
CSS word-wrap:break-word;
, tested in FireFox 3.6.3
answered Jun 17, 2010 at 4:37
BabikerBabiker
17.8k27 gold badges74 silver badges123 bronze badges
0
Remove white-space: nowrap
, if there is any.
Implement:
white-space: inherit;
word-break: break-word;
TylerH
21.1k59 gold badges74 silver badges93 bronze badges
answered Apr 24, 2018 at 14:09
1
I solved my problem with code below.
display: table-caption;
answered Jan 4, 2017 at 19:20
0
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?
answered Nov 7, 2017 at 6:53
Shiva127Shiva127
2,1931 gold badge25 silver badges24 bronze badges
First you should identify the width of your element. E.g:
#sampleDiv{
width: 80%;
word-wrap:break-word;
}
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
so that when the text reaches the element width, it will be broken down into lines.
TylerH
21.1k59 gold badges74 silver badges93 bronze badges
answered Feb 20, 2014 at 10:22
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 luchthavenpolitieagent
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
answered Nov 4, 2019 at 22:35
word-break: normal seems better to use than word-break: break-word because break-word breaks initials such as EN
word-break: normal
answered Jan 16, 2020 at 11:24
MatoeilMatoeil
6,5829 gold badges51 silver badges74 bronze badges
.word-break {
word-break: keep-all;
word-wrap: break-word;
}
answered May 10 at 18:46
You can use a grid system for this.
Thisisatest.Thisisatest.Thisisatest.
Thisisatest.Thisisatest.Thisisatest.
answered Feb 16 at 6:32
ShamsShams
392 bronze badges
Do this:
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
#sampleDiv{
overflow-wrap: break-word;
}
answered Sep 21, 2016 at 13:21
amit bendeamit bende
2563 silver badges4 bronze badges
just try this in our style
white-space: normal;
answered May 7, 2015 at 9:26
2
How do you force a line break?
How do I make text go to next line in CSS?
How do you force a line break in HTML?
HTML element produces a line break in text [carriage-return].
What can I use instead of br?
tag. The used properties are listed below: white-space: pre; It is used to make elements acts like
tag. display: block; It sets the display property of elements to block.