Take a long continuous string of text like so:
Question?Thisisanissuewithusingquestionmarks
In all versions of IE, the line breaks unexpectedly after the question mark. In IE9+ this is countered by using white-space: pre;, but IE8 seems to ignore it (even though it's supported). The only way I've been able to get this to wrap as normal (i.e. not line break at the question mark) is by using a mono-spaced font, but this also extends the length of the textarea. Any ideas?
To summarize: I want a HTML/CSS solution to having the line not break on to a new line after the ? mark in IE8.
Fiddle: https://jsfiddle.net/8m5yea9y/
Example of how it's working fine in IE9+ using white-space: pre;
Adding word-break: break-all; to your css for the textarea should cause the line to break as desired. You may also need to add word-wrap: break-word;.
Added Screenshot: Tested and works in IE8 on windows XP.
Related
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
I'm trying to float image and text in the paragraph. But there is some problem when text is long and in one line. It looks fine in the Chrome, but not in the Mozilla Firefox. You can check it there:
In the Chrome it looks as:
and FireFox:
How can I do it correctly?
Thank you for any help.
I recently ran into this and it's a silly test data mistake. If Firefox (and maybe other browsers) doesn't find a logical word break, it has nothing to wrap and therefore it stays on one line. Add spaces to your long test text and remove white-space: pre from your paragraph.
body p {
word-wrap: break-word;
}
http://dabblet.com/gist/9b9e1ca0f2c65c550471
Have you tried to use:
float:left;
word-wrap: break-word;
width: 500px;
width: ** The width of the word you want to break in px or % **;
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;
So I've been banging my head against a wall trying to figure this issue out with Chrome and how it has a hard time wrapping long URLs in a table cell. I have seen a lot of questions regarding word wrapping and some even had with long URLs but none of them worked for me. So essentially, I tried putting in the td
word-wrap:break-word;
but this doesn't wrap the long URL which is (changed here, doesn't go to anything):
https://differentName/api/?REQUEST=%3C%3Fxml%20version%3D%271.0%27%20%3F%3E%3Cnta%3E%3Capi%20version%3D%271.0%27%3E%woot%20function%3D%22login%22%3E%3Clogin%3E%3C!%5BCDATA%5Bjpublic%something.com%5D%5D%3E%3C%2Flogin%3E%3Cpassword%3E%3C!%5BCDATA%5Bnta46550%5D%5D%3E%3C%2F
I've tried adding a width property onto the td but I get nothing. I was also told that when using the word-wrap property to also include:
table-layout:fixed;
But I don't want my columns fixed in width. Also, I don't have the wrapping issue if I use the fixed property. I'm working off of the latest version of Chrome (as of this date). No issues with FF 26.0 or IE 11. Any help would be great.
I would just establish a class on the td that you are having the issue with.
In its current state, you are only breaking when spaces are present.
If you want to force breaks without spaces in Chrome as well, you can use the CSS word-break: break-all;
Does something like this work for you?
http://jsfiddle.net/qqsj8/2/
CSS:
td.break {
/* Be VERY careful with this, breaks normal words wh_erever */
word-break: break-all;
}
HTML:
<td class="break">Why do...</td>
I have an HTML table 360px wide, which works great. The challenge is that sometimes a url appears http://this/is/a/really-really-really-really-really/long/url in the text. This causes the table to expand horizontally and a scroll bar appears on the bottom.
I don't think overflow:hidden will work because half of the text would be hidden.
What is the best way to force breaking the line on slashes (/) and dashes (-) in CSS (hopefully)?
It should work with IE7+, Chrome, Firefox and Safari.
Working in Rails 3 and jQuery.
tl;dr; (edited Apr 2022)
Use <wbr> word-break-opportunity element before each /. See first link in further reading below.
Details (original from 2014)
While the css word-wrap: break-word; does work, its implementation is different across browsers.
If you have control of the content and want exact breakpoints, you can insert
a <wbr> word break (supported in all major browsers except IE8 CanIUse.com);
zero-width space (U+200B) - ugly in IE<=6
soft hyphen - though of course this adds a hyphen when breaking which is not always what is desired.
I have a large corporate user base who still have to use IE8, so when I hit this problem I used the C# someString.Replace("/", "/") in the server-side code.
Gotcha: If you insert a zero-width space in an email address, when a user copies and pastes into their email client, the space gets copied too and the email will fail with no way for a user to see why (the space is zero width ...)
References
Stack Overflow
http://www.quirksmode.org/oddsandends/wbr.html - with examples
Further Reading
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr#example
https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
https://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/ (March 2012)
https://css-tricks.com/almanac/properties/w/word-break/ (Sep 2012)
https://css-tricks.com/almanac/properties/h/hyphenate/ (Sep 2011)
You can use word-wrap : break-word; like so:
div {
width : 50px;
border : 1px solid #000;
word-wrap : break-word;
}
<div>http://www.aaa.com/bbb/ccc/ddd/eee/fff/ggg</div>
I tested this in: I.E. 6/7/8, Firefox 7, Opera 11, Safari 5, Chrome 15
Here is a jsfiddle: https://jsfiddle.net/p4SxG/
If you don’t really care where the breaks happen, the simplest method is to add the style overflow-wrap: break-word;. This will allow long words to break without affecting the breaking of other words.
But if you want to break at specific characters, such as the slash character, you can’t do that with CSS, you have to do it in HTML. If you have access to the HTML code you can choose any of these solutions:
<wbr> word break opportunity tag
zero width space
​ zero width space
But you don’t always have access to the HTML code. Some web applications won’t allow you to enter code into certain fields; for example, WordPress will filter out any code you enter into a post title. In these situations you may be able to insert a zero-width-space character directly. One way to do this is to use Character Viewer (Mac) or Character Map (Windows), although of course they are a bit tricky to use when it comes to spaces because spaces are invisible. In the case of Character Viewer, when you search for arrow, lots of matches appear, but when you search for zero width space, it appears that no characters were found. But if you click where the blue square is in the second image below, you’ll discover that the character was found, it’s just invisible.
A snippet to demonstrate that these various methods all work:
h1 {
width: 15rem;
border: 1px solid black;
}
.b {
overflow-wrap: break-word;
}
A title which is too long
<h1>Seminars/Workshops</h1>
Breaking with CSS
<h1 class="b">Seminars/Workshops</h1>
Breaking with HTML: code-based solutions
<h1>Seminars<wbr>/<wbr>Workshops</h1>
<h1>Seminars/Workshops</h1>
<h1>Seminars​/​Workshops</h1>
Breaking with HTML: character-based solution
<h1>Seminars/Workshops</h1>