Today I'm going to talk about a rarely used but extremely useful CSS property, the word-wrap. You can force long (unbroken) text to wrap in a new line by specifying break-word with the word-wrap property. For example, you can use it to prevent text extending out the box and breaking the layout. This commonly happens when you have a long URL in the sidebar or comment list. Word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari.
CSS: Word-Wrap Property (view demo)
You can specify either normal or break-word value with the word-wrap property. Normal means the text will extend the boundaries of the box. Break-word means the text will wrap to next line.
.break-word {
word-wrap: break-word;
}
its not working if word is to long (for example: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa)
really solution will be appreciated
/* wrap long urls */
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP Printers */
word-wrap: break-word; /* IE 5+ */
try it will work
Thanks it work
anybody know of a way to make it work with a long string like aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
for example?
thanks in advance!
Ref long string issue, I am guessing that this is due to poor user input as I don’t see when you would want to wrap a string like that. Suggest cleaning the user input pre-upload to avoid that situation. Depending on your scripting language, there are alternate ways to achieve this.
1. Shorten urls displayed (assuming clickable, why show such a long url?)
2. Police your data entries (dont allow people to upload rubbish :) that’s a good start
Hope that’s helps. Had this issue when I started out, trick is to ask the right question, in this case that is who wants to see a ridiculously long url or a load of repeated letters? Not humans and there are better ways to pass this on to the search bots if that is a desired aim.
That’s quite true, fitting to the “provide the best” part of the “provide the best, accept the worst” maxim. The other side of the stone though is that you don’t always have a choice in what data is provided, perhaps from an API, aggregation or legacy database.
For example, what if you have an SQL statement with a long x IN (123,234,62,326,1346,) list? Are you going to reformat it so that it wraps when displaying it? More likely it would be useful to see it in its original form but wrapped so the whole thing is visible.
with respect to your opinion ted
this is neither a solution nor even a workaround
you can’t force every thing you want , you are not always the one who put the business rules , and you should not be the one who do it
your suggestion is to escape from the problem of too long texts not for solving it
erhfguerheimnvefvuhr
its works! supercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocious
Its work
Must be block element and with fixed width to work.
I fixed the text when it go over the border in table.
Here the solution.
http://www.thebestdata.com/zoom.aspx?menutype=1&auto=3316&t=Force-wrap-text-CSS
/* wrap long urls */
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP Printers */
word-wrap: break-word; /* IE 5+ */
try it will work on all browsers
It doesn’t seem to work in Firefox 15.0
Not working with chrome :(
Can’t believe there was such a simple fix for this that actually worked in IE 5.5. Had to put out a fire in our production app and this article saved us. Thanks!
Er, I meant that I can’t believe such a simple CSS property works in IE in general.
Please note that this solution only works on block level items that have a width. So for tables that break add a div around your content and apply the css to that. Then make sure the table cell the content lives in has a width or the div has a width.
Hey Vanessa, that worked perfectly. Thanks. I put Div inside td and my content in div and applied style to div. worked perfectly for me.
It still doesn’t work in my case, i will try to save it with pure php.
Try: style=”word-break: break-all;”
This solution worked for me in Chrome and Safari!
Very short solution for wordwrap. thanks for it!
Great got my head done in with this word-wrap, lucky found your tut, sweet love your stuff…
Breaks numbers in the middle like this:
1,2,…19,2
0,21,……
….88,99,1
00
Thanks a lot from Spain!
“white-space:normal;” works perfectly!
word break breaks a le
tter
and not a word of a se
tence
It works for me, but it seems to break the “align:justify” in Outlook Express! :-(