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 % **;
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
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.
On IE11 / win7 64 I'm noticing a very weird pattern relating to how words wrap on a textarea.
Example:
http://fiddle.jshell.net/fy2aoz28/1/
With that text on the textarea, the second line is almost empty but it has space to at least have to "to :event_name" string.
On chrome that looks like this:
So, what's going on here and is there any way to force all browsers on the same behavior?
Add the white-space property. It is used to describe how whitespace inside an element is handled.
textarea{
width: 300px;
height: 200px;
white-space: pre;
}
Should look the same in Chrome and IE now. Here's a fiddle for you to review. http://fiddle.jshell.net/fy2aoz28/2/
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'm developing an iPhone theme for my website, can you be able to break a long sentence something like this:
A long sentence would go past the iPhone screen and I need this to break
Into this:
A long sentence would go past the iPhone
screen and I need this to break
Showing like this:
http://uimgz.com/i/M8U5X5f2d1.png
if your text has spaces then adding a width for the wrap element will break the text automatically. But if you have a text without a space (such as a link) you can use break-word:
.your-selector {
word-wrap: break-word;
}
As per: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#Browser_compatibility
pre {
word-wrap: break-word; /* IE 5.5-7 */
white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
white-space: pre-wrap; /* current browsers */
}
word-wrap doesn't seem to work any more, use white-space instead
I think the problem is that the "viewport" is wider than the device's screen. See this post for some background and possible solution.