Using ASP.NET I'm trying to build a ListBox in which each option's text wraps to the next line, in case the line is longer than the listbox's width, only using CSS.
Using the word-wrap: break-word CSS property is sufficient to get this working in Chrome, however, this does not work for IE11.
I've searched around and found various alternatives for similar problems, which included some combination of the following properties:
-ms-word-wrap: break-word;
word-wrap: break-word;
word-break: break-all;
white-space: pre-wrap;
width: 100%;
None of which seem to work for me.
Am I missing something? Or does IE11 simply not support this and do I need to resort to an external plugin?
Word wrap is supported by IE.
word-wrap is a CSS3 element and is supported by IE9 +, but for IE8 you will need to use the prefix -ms- on it.
-ms-word-wrap: break-word;
Related
My question:
Is there any difference between overflow-wrap: break-word and word-break: break-word?
Non-duplicates:
Here are some existing questions that may appear to be duplicates at first sight but aren't.
What is the difference between "word-break: break-all" versus "word-wrap: break-word" in CSS (That question is about word-break: break-all but my question here is about word-break: break-word)
Difference between overflow-wrap and word-break? (That question asks about overflow-wrap and word-break attributes but my question here is about the break-word value for this attributes in particular. Also, that question is mysteriously marked as a duplicate of the previous question even though it is unrelated.)
Code:
I wrote this code snippet that appears to show that both overflow-wrap: break-word and word-break: break-word behave the same way. But I don't know for sure if I have accounted for all cases. Maybe there is a case in which they behave differently?
.ow {
overflow-wrap: break-word;
background: lightgreen;
}
.wb {
word-break: break-word;
background: lightblue;
}
div {
width: 5em;
display: inline-block;
}
<div class="ow">
Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
</div>
<div class="wb">
Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
</div>
<div class="ow">
Most words are short and don't need to break. But Antidisestablishmentarianism is long.
</div>
<div class="wb">
Most words are short and don't need to break. But Antidisestablishmentarianism is long.
</div>
Browser support:
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap#Browser_compatibility shows that overflow-wrap: break-word is supported since Chrome 23, Edge 18, Firefox 49, Safari 6.1. It isn't supported in IE. (I am ignoring the non-standard name word-wrap here. I care only about the standard name.)
https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#Browser_compatibility shows that word-break: break-word is supported since Chrome 1, Firefox 67, Safari 3. It isn't supported in IE and Edge.
Considering the browser support matrix, it looks like overflow-wrap: break-word works with all modern browsers.
What I want to know if you can imagine any type of text or HTML that would make overflow-wrap: break-word and word-break: break-word behave differently?
To simplify it, word-wrap is an older version of overflow-wrap and has been replaced by overflow-wrap in the current CSS3 specification. This rule allows you to tell the browser is it allowed to break words when they are too long.
On the other hand, word-break allows you to tell the browser how to break the words.
As you've noted in your question, the break-word value for both of these rules will behave the same. See these definitions from the links I provided above:
word-break: break-word:
To prevent overflow, normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.
overflow-wrap: break-word:
The same as the anywhere value, with normally unbreakable words allowed to be broken at arbitrary points if there are no otherwise acceptable break points in the line, but soft wrap opportunities introduced by the word break are NOT considered when calculating min-content intrinsic sizes.
Yes, overflow-wrap: break-word and word-break: break-word can behave differently. I've run into that, though I'm finding it hard to reproduce!
It helps to understand that at this point, word-break: break-word is really an alias for overflow-wrap: anywhere.
word-break: break-word is officially deprecated; see the CSS Text Module Level 3 Working Draft:
For compatibility with legacy content, the word-break property also
supports a deprecated break-word keyword. When specified, this has the
same effect as word-break: normal and overflow-wrap: anywhere,
regardless of the actual value of the overflow-wrap property.
The thing to note here is that word-break: break-word is an alias for overflow-wrap: anywhere, NOT an alias for overflow-wrap: break-word.
(word-break: normal is just the default value for word-break, so you can ignore it unless you're setting a different value for word-break.)
How do overflow-wrap: anywhere and overflow-wrap: break-word differ?
Well, here's a page from the wild, using overflow-wrap: anywhere:
And here's the same page, using overflow-wrap: break-word:
The only difference in the documentation between the two is that overflow-wrap: anywhere DOES "consider soft wrap opportunities introduced by the word break" when it is "calculating min-content intrinsic sizes", while overflow-wrap: break-word does NOT.
I guess widths might be more accurate in some cases if it is considering them?
As written in documentation, word-break: break-word behaves as word-break: normal combined with overflow-wrap: anywhere, but overwrites actual overflow-wrap value.
Documentation for overflow-wrap states that anywhere allows soft wraps (for example, on spaces), introduced by hard wraps, while word-break doesn't.
This means, that if the container has with depending on content size, anywhere will calculate width as if there are no overflowing words and then cut them to fit the container, while word-break will consider overflowing words as a reason to make the container as wide as possible.
In the example, the width is set as the longest word in the first sentence for word-break: break-word and overflow-wrap: anywhere, while overflow-wrap: break-word forces width to reach the limit, as there is a long word in the second sentence.
.owbw {
overflow-wrap: break-word;
}
.owaw {
overflow-wrap: anywhere;
}
.wbbw {
word-break: break-word;
}
div {
width: min-content;
max-width: 150px;
display: inline-block;
background: lightgreen;
}
<h3>overflow-wrap: break-word</h3>
<div>
This text has no reason to take the max width. <b class="owbw">The word AVeryLongWordWithoutAnyPlacesToBreakIt might cause it in some cases.</b>
</div><br>
<h3>overflow-wrap: anywhere</h3>
<div>
This text has no reason to take the max width. <b class="owaw">The word AVeryLongWordWithoutAnyPlacesToBreakIt might cause it in some cases.</b>
</div><br>
<h3>word-break: break-word</h3>
<div>
This text has no reason to take the max width. <b class="wbbw">The word AVeryLongWordWithoutAnyPlacesToBreakIt might cause it in some cases.</b>
</div>
I have a div element that I am using for paragraphs of text. This is intended to be mobile-responsive, so I have been testing it with different browser/viewport sizes. I have the following code:
.text {
font-size: 18px;
word-break: break-word;
overflow-wrap: break-word;
width: 200px;
border: red solid 1px;
}
<p class="text">Wordthatislongenoughtogetalineonitsown andawordthatfits fits</p>
When the window is resized, it looks fine on Chrome, with the w's going to a new line and then breaking.
However, with Firefox, the words don't break at all, and the div element expands to include all the text, creating a scrollbar at the bottom of the page.
How can I get it so that the word breaks in Firefox? I have tried adding white-space: pre-wrap; but all it does is add ugly line breaks and doesn't even force the word break. I don't want to use word-break: break-all; because that would break every word, and I only want to break overflow words. overflow-wrap: break-word; also appeared to do nothing.
EDIT:
I am trying to get it to look like this, and this is how it looks on Chrome: Chrome Success
This is what it looks like on Firefox (not what I want): Firefox Error
This is what it looks like with break-all, which is not what I want either. Note how words are broken when they could move to the next line: break-all
I'd suggest removing word-break at all, and just leave overflow-wrap (or word-wrap, if you want IE/Edge support) and it should be fine.
Why?
Update
It seems that the spec has been updated in Dec '18 to mention the break-word value as a deprecated one:
For compatibility with legacy content, the word-break property also supports a deprecated break-word keyword. When specified, this has the same effect as word-break: normal and overflow-wrap: anywhere, regardless of the actual value of the overflow-wrap property.
Old part of answer
word-break: break-word seems to be a bug in Webkit-based browsers (or maybe a leftover from older css 3 drafts?), as break-word is a correct value only for overflow-wrap (or word-wrap, for older browsers (and Edge ;) ) property.
I've created a
comparison in js fiddle
src:
word-break spec
overflow-wrap / word-wrap spec
It has come to my attention that in Microsoft Edge there is a problem with some css attributes, such as :
word-break: break-word;
Is there a way of fixing this or is there a way around this?
word-break: break-word is deprecated, and not supported by MS Edge or MS IE. See mozilla documentation about this.
word-break is supported by MS Edge and MS IE Here is a list of supported browsers.
Valid MS Edge and MS IE word-break properties are:
word-break: normal|break-all|keep-all|initial|inherit|unset;
Alternatively mozilla documentation specifies that overflow-wrap: break-word; acts the way that you want word-break: break-word to function.
An alternative solution is to make use of the word-wrap property which IMHO behaves more 'intelligently' - meaning the word break will only be applied when the word is too long to fit into a line width, and won't be applied to words that can simply be moved in whole to the next line.
CSS:
word-wrap: break-word;
The word-wrap property is supported by most browsers and as of today I can certainly confirm it works in Microsoft Edge, IE11, Chrome, Firefox, Opera and Safari.
Note, word-wrap has now been renamed to overflow-wrap, with word-wrap now being an alternative name for that property, however overflow-wrap is not understood by Microsoft Edge so stick with using word-wrap for cross-browser compatability.
The thing is that you have to provide width for container/text in order to use word-break: break-word property. The only way to avoid this is to use unofficial WebKit/Blink only word-wrap: break-word property: https://caniuse.com/#search=word-break
It's also worth mentioning, that while word-break: break-word; is improper property , it's undocumented and non-standard property value in WebKit. This makes the word wrapping behave like word-wrap: break-word, but works with dynamic widths.
Use -ms-word-break: break-all;
before word-break: break-word;
overflow-wrap: break-word;
is the way to go, it works also for Edge now.
Thanks #David for mentioning it!
word-wrap: break-word;
display: inline-block;
width: 100%;
try this
I needed to fix some CSS somewhere because my text wasn't wrapping around and was instead going on indefinitely if it was an extremely long word.
Like in most cases, I tried word-wrap: break-word; in my CSS file and it did not work.
Then, to my surprise, and by the suggestion of Google Chrome Developer Tools, I tried word-break: break-word; and it fixed my problem. I was shocked by this so I've been googling to know the difference between these two but I have seen nothing on the subject.
Further, I don't think word-break: break-word; is documented behavior seeing as how W3 has no mention of it. I tested it on Safari and Chrome, and it works perfectly on both, but I'm hesitant to use word-break: break-word; because I see no mention of it anywhere.
Update
If you plan on breaking words and want to hyphenate as well, try the following:
.hyphenate {
overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
This worked even in Chrome ... sort of ... sans hyphens. Anyways a detailed explanation is in this article.
word-break:break-word is not documented and only master developers know this ultra secret technique like the Quivering Palm of Death.
Actually it's an obscure -webkit- property that works like word-wrap: break-word but it's also used on dynamic lengths as well.
Kenneth.io - Word Wrapping Hypernation Using CSS
CSS-Tricks - word-break
From CaniUse:
Chrome, Safari and other WebKit/Blink browsers also support the unofficial break-word value which is treated like word-wrap: break-word.
I have a need for an html control with fixed number of columns that does wrapping based on any character. Similar to the very old DOS or Telnet terminals that move to the next line whenever the column is beyond 80. Normal textarea with CSS word-wrap: break-word; and text-wrap: unrestricted; did not work. The latter is not supported in Google Chrome.
The only way this works is with n editable div and the following CSS properties. Tested in Google Chrome:
word-wrap: break-word; white-space: pre; and the div must have an explicit width.