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;
}

break word

180 Comments

Mauko
Mar 29, 2010 at 6:02 am

Yes, it’s essential when I did a website for a thai customer, because in thai they hardly have any breaks….
thanks for sharing

Joao Joaquim
Mar 29, 2010 at 6:05 am

True, this css property is not much talked about, but it’s a real life safer for web designers, specially when you need to break URLs, like you stated in your post.

Martin Berglund
Mar 29, 2010 at 6:10 am

This CSS property might be quite usefull to apply to chunks of code. I see many web related blogs where code examples break the layout :)

Marco
Mar 29, 2010 at 6:29 am

That’s very useful! Would be even more useful if one could define certain characters after which a break is allowed (for instance underscores, dots, slashes, etc).

Jaina
Mar 29, 2010 at 6:33 am

Really, really useful bit of CSS. Thanks!

ocube
Mar 29, 2010 at 6:42 am

Never heard of this before, you continue to unearth web gems, thanks dude!

Andreas Schamanek
Mar 29, 2010 at 6:50 am

If it were working with pre … here the support by browsers is horrible.

Jordan Walker
Mar 29, 2010 at 7:57 am

This is a really good thing to know.

Anton Reimertz
Mar 29, 2010 at 7:58 am

Didn’t know about this one. Thank you!

John
Mar 29, 2010 at 9:15 am

Didn’t know about this. Thanks!

Jürgen Zywietz
Mar 29, 2010 at 9:37 am

A really good thing to know. Thank you!!

Brian Jones
Mar 29, 2010 at 10:28 am

Thanks for the quick refresher!

Nors
Mar 29, 2010 at 11:33 am

Very powerful property, actually. Thanks for sharing :)
By the way; Can’t you show how to create a paper texture like the one you’re using here? :D

Max
Mar 29, 2010 at 11:34 am

AWESOME!

I was fighting with this issue just the other day, and BAM! Here’s a solution.

Thanks again WebDesignerWall!

David Hucklesby
Mar 29, 2010 at 1:08 pm

Opera too!

Brayden W
Mar 29, 2010 at 1:18 pm

Great post. I also would strongly agree with your dual monitor suggestion. Right now I use my notebook as both a portable and desktop solution and when at home I plug a 22″ monitor into it to extend the laptop display. It work great! I’d love to have the virtual spaces like Linux and Mac have, but I need a lot of specialized software for my engineering classes that aren’t available for either, and I don’t like dual-booting.

Kevin K
Sep 21, 2011 at 8:51 am

Brayden — if this is still an issue, check out “mDesktop” (code.google.com/p/mdesktop) by Jason Stallings. HTH,

Brayden W
Mar 29, 2010 at 1:19 pm

Oh wow! One bad thing about tabs, I posted the message below on the wrong blog. Good post though ;-)

Joe DiSalvo
Mar 29, 2010 at 2:06 pm

Nice tip… Can you think of a situation where you would ever not want to have word-wrap set to break-word? I ask because I can’t and I’m thinking of adding this to my CSS reset file to set all elements to behave this way by default. Curious what anyone else might think about that as well.

Baloot
Mar 29, 2010 at 2:42 pm

I didn’t know this at all. Well thank you WDW.com :)

Birgit
Mar 29, 2010 at 2:52 pm

this will be very useful, thanks!

chibi
Mar 29, 2010 at 5:26 pm

Interesting..it doesn’t appear in dreamweaver, never knew it existed!

Thanks for sharing this!

Christopher Neuharth
Mar 29, 2010 at 5:35 pm

Oh c’mon. If only we were all happy and wonderful in CSS-support-land.

” Word-wrap is supported in IE 5.5+, Firefox 3.5+”

Notice a gap there? Yeah, Firefox had some major issues with this for a number of versions. Here is a much better link: http://snipplr.com/view/10979/css-cross-browser-word-wrap/

And even that’s not fool-proof.

Andrew
Mar 29, 2010 at 5:53 pm

I love these little pointers! Keep them comin’! :)

Francisco ( @chycoo )
Mar 29, 2010 at 10:36 pm

Copying Birgit Zimmermann, this will be very useful, thanks!

nilika
Mar 30, 2010 at 1:09 am

websitereckon.com

free check your website worth , daily pageviews, daily earning………etc.

websitereckon.com

Kai Chan Vong
Mar 30, 2010 at 3:48 am

RE: Joe DiSalvo

I think for user generated content this is the cookie cutter solution. As for a reset – I’d rather not until browsers start adding in hypthens or elipsis to suggest the text has more: See Chrome’s use of “text-overflow:ellipsis;” (http://www.blakems.com/archives/000077.html)

芒果
Mar 30, 2010 at 3:54 am

but opera do’t support this property~

Jonathan Butterworth
Mar 30, 2010 at 1:13 pm

I have never used that one. I usually use “text-align: justify;” but it does not break the word.

Thorsten
Mar 30, 2010 at 4:00 pm

Thanks for this tip. I didn’t know about it before but I will use it in the future.

Calvin Tennant
Mar 31, 2010 at 1:29 am

I will most definitely be picking up on this one.

mack
Mar 31, 2010 at 2:45 am

Thanks for sharing this. But we usually use anchor links with title property instead of the links like this.

Dale
Mar 31, 2010 at 4:18 pm

Pretty cool concept, but can’t used in most common case of displaying code on the screen. When used in conjunction with <pre> tag, couldn’t get wrap to work. ;(

re
Mar 31, 2010 at 5:42 pm

the same effect as the a “wide” and align the value “text-align: justify” there ? :S

Maquetador
Apr 2, 2010 at 4:13 am

very useful property. I will use in my new projects

R Marganti
Apr 2, 2010 at 12:32 pm

Thanks. Was having issues with a twitter feed that will benefit from this.

William
Apr 6, 2010 at 5:47 am

I was wondering from a long time for such a tag in CSS. It will surely help me in my designing because I am a Joomla expert but a newbie to CSS. Thanks for sharing. Keep updating more new tips & tricks for CSS

Soni
Apr 8, 2010 at 8:57 pm

Really useful tutorials! I m new in this field and trying to put pdf & text file in CMS . If i can get some information that will be really awesome.
Thanks
Sonia

naran_ho
Apr 9, 2010 at 4:38 am

Really useful, Thanks for the tip.

red
Apr 12, 2010 at 3:26 am

Very interesting, thanks for sharing this!

webdesignas
Apr 15, 2010 at 2:24 pm

Gracias por el aporte, muy interesante

MysteryE
Apr 16, 2010 at 11:56 am

Hooo!!
Nice info! It sure is very useful! Thanks for pointing this CSS!!
I’ll try it in my next project! :)

Lening
Apr 17, 2010 at 7:31 am

Thanks for sharing, it looks great.

sbobet
Apr 20, 2010 at 4:17 am

You can take a virtual world in miniature of my screen. Cool ideas.

gclub
Apr 20, 2010 at 4:17 am

wow. It’s all very beautiful.

Web Design
Apr 28, 2010 at 9:32 pm

very useful thank you

Ashraf
May 6, 2010 at 1:29 am

good……..thanks

ChrisR
May 6, 2010 at 10:14 am

I am wondering how to apply this property to say, all a:links in a certain div of a website that is Drupal-based–where it is not feasible to manually add a class .break-word to individual a:links?

shameer
May 24, 2010 at 12:46 pm

thank you for good tuts

Eric Tamminga
May 27, 2010 at 10:33 am

Just what I was looking for. Thanks.

AndyiBM
Jun 7, 2010 at 7:24 am

Hi Nick, thanks for this. However, I have tried applying it, and found that unless I also add a set width to the style that the text does not wrap (in FireFox on PC, anyway). Have I missed something?

macnc
Jun 7, 2010 at 9:34 am

@AndyiBM – You have to specify a width for the element in which you are going to use the word-break property OR the element’s width should be restricted by another adjacent element in the layout. How else would the element know where to break the concerned word? Get it?

mozzartut
Jun 7, 2010 at 2:08 pm

I use the <pre&gt tag on my web page when i write codes and i waste a lot of time breaking lines. This is very useful.

mozzartut
Jun 7, 2010 at 2:09 pm

I like the preview function when you write comments. A tutorial on that could be useful.

Geoff Ellis
Jun 19, 2010 at 7:27 am

You can also use this:
white-space:nowrap;
for when you want to force something on to one line

Julia
Jun 26, 2010 at 9:23 am

This what I was looking for. Thanks!

tttttt
Jul 3, 2010 at 12:21 am

tttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt

Kenneth Rougeau
Jul 6, 2010 at 8:17 am

Schweet, just what I needed, thx! :)

code pixelz media
Jul 8, 2010 at 5:24 am

Nice article. Thanks for taking time to create this article

ade
Jul 12, 2010 at 5:57 am

Great a great site list!!, great thanks.

zia
Jul 21, 2010 at 4:47 am

Nice..love your site

Marcel
Jul 23, 2010 at 2:54 pm

Thanks for this, I looked for a few hours how to solve the long_urls_in_sidebar issue :)

Holly Perkins
Jul 27, 2010 at 1:06 am

Try this one
div { word-wrap: break-word }

Here is some content for the div element
Files Sharing

shano
Aug 11, 2010 at 4:42 am

Excellent thank youuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu

cone crusher
Aug 13, 2010 at 8:55 pm

Nice..love your site

xxx
Aug 18, 2010 at 4:07 am

It seems to work only in IE.

campi
Aug 30, 2010 at 2:12 pm

How do I have to apply to WYSIWYG editor(CK Editor)?
Have just I add this line into:

/template/system/editor.css
or
my template’s css?

Just it?

It doesn’t work;(

Selena
Aug 31, 2010 at 2:16 am

Great topic! Thank you very much!

I found a lot of usefull tips here :) Thanks for sharing.

divineantony
Sep 1, 2010 at 3:34 am

nice work.
thank u…………

Hristo
Sep 13, 2010 at 9:54 am

One important note – if the element has a fixed width this approach works well. However if you have width 100% this doesn’t do the job.

Ram
Sep 17, 2010 at 6:27 am

For Fire Fox use:: div {word-wrap:break-word}
For IE use : div { word-break:break-all}

total_bs
Sep 23, 2010 at 4:14 am

Wow – thanks, just stumbled on this as needed a solution for a problem I was having and works like a charm.

Also thanks for the edition there Ram.

ospop shoes shop
Sep 24, 2010 at 8:21 am

Thanks for this tip. I didn’t know about it before but I will use it in the future.

Vimal
Oct 13, 2010 at 1:18 am

This technique will not work for long text inside a cell in a table. In my work environment tables are used show the data fetched from the database, and they raise the ticket as design issue. Please help.. any css work around?

Ümit Akkaya
Oct 17, 2010 at 5:05 pm

İf you have fixed width like 100%
You also must set max-width property of css to make it work.

El garch
Oct 20, 2010 at 4:30 am

thank you for extra super article, it will help a lot, i think even tough we fix the width, the problem will not be solved.the only solution is to use the property word-pray with the value break-word.

Kritsmann
Oct 26, 2010 at 3:42 am

Very useful article! But it did not work with text inside table cells. There was no problem with Firefox, but Safari, IE8 and IE7 gave different result. IE7 rendered the text block inside cell with given width 200px but the table cell itself was streched into width of the long string without text wrap. so I got cell with wrapped string inside and lot of white space beside it. Adding max-width did not do any difference. But I found one solution that worked for all.

The CSS part is the original described in the article, but I added these styles: width: 200px; float: left;

By making text block float, IE7 rendered table cell correctly widthout any additional white space. And it did not affect other browsers.

Melvins
Nov 1, 2010 at 4:35 am

Helpful article for me. Thanks for sharing.

Los Angeles Web Design

samir
Nov 4, 2010 at 5:06 am

This is new property included in CSS3 not available in older version and all browsers dosent support it.

Terry Prothero
Nov 6, 2010 at 9:18 am

My experience so far with word-wrap is that it has worked well with Internet Explorer 6 and 7, didn’t work at all with Firefox and broke the line of text in the middle of words in Explorer 8. Safari had similar result as Explorer 8, but I don’t know if word-wrap should be blamed. (Unfortunately, I just found out about those last problems yesterday when viewing my web page at a client’s house. Oops!)

I used white-space:pre-wrap; with Firefox successfully and white-space:pre; seems to work on almost any browser. Unfortunately all of the word wrapping options seem to give me problems in one browser or another.

The best solution, at the moment, seems to be white-space:pre; to preserve text formatting, using fonts that everyone has (like Arial ) and manually hitting carriage returns where the line of text should end. This isn’t a fancy way to go, but it should give predictable results across just about any browser.

Feel free to check out my website. (Just wait a day two for me to do some editing if you are running IE8 or Safari.)

Terry Prothero
Nov 10, 2010 at 8:01 am

Forget what I said previously about white-space:pre. It was causing some odd display issues in Internet Explorer. In fact the preformatting, attributes and tags in general seemed to be a little unpredictable.

The only thing that seems predictable so far is that white-space:normal; initiates normal word wrapping in almost any browser. Word-wrap:break-word initiates normal wrapping in IE6 and IE7, has no effect in firefox, and breaks words in the middle in IE8. I didn’t get at first that you found this desirable under some circumstances. Unfortunately, it only seems to work consistently well in IE8.

In my case, I wanted normal wrapping behavior and preservation of formatting for the main text box on my web pages. White-space:normal; seems to get the wrapping started and standard html tags like and   work best for adding white space to the text. I used the replace function of notepad to replace any double spaces with   followed by a space. This was a remarkably easy way to switch over my pre formatted text. I should have the work done on the pages this morning and begin final testing. At that point, I’ll know for sure how well this cleaner version of the code works.

Note: I’m running in HTML 4.01 strict mode.

Terry Prothero
Nov 10, 2010 at 8:06 am

Oops! Standard html tags like <br> and &nbsp; Sorry, all this html is turning my brain to mush.

wonderland
Nov 17, 2010 at 1:56 am

Awesome, tip!!! Thanks a lot! :)

pwojcieszuk
Nov 29, 2010 at 8:28 am

In fact, word-wrap:break-word sometimes does not properly if an element has no width determined, or it is determined with relative values (e.g. %).

wisadl
Dec 10, 2010 at 4:05 am

This is a great inspiring article.I am pretty much pleased with your good work. ugg classic cardy You put really very helpful information. Keep it up. Keep blogging.

Uçak Bileti
Jan 12, 2011 at 5:33 am

bu dağların nesine geldim şiir kuzular sesine geldim

Ben
Jan 15, 2011 at 3:45 am

That will really help us all. And this might bring some good repute to you.

John McDuffie
Jan 21, 2011 at 4:57 pm

very handy tip!

chris balyesss
Jan 25, 2011 at 1:36 pm

This is a very helpful tool thank you

Jason
Feb 1, 2011 at 2:59 pm

Thank you for this! You saved me a bunch of frustration with a too-wide div display!

Dobromir Raynov
Feb 2, 2011 at 4:52 am

Great! Saves a lot of link text truncating :)))

altın çilek
Feb 2, 2011 at 6:15 am

That’s Great! Thanks for the post!

hcg damla
Feb 2, 2011 at 1:57 pm

This is a very helpful tool thank you

few
Jun 13, 2011 at 7:23 pm

Few

San Diego Mobile Notary
Feb 3, 2011 at 1:32 am

Now that was too simple. I will use this on Melissa’s notary site.

San Diego Mobile Notary

Abe
Feb 5, 2011 at 4:20 pm

Nice and simple. Did the trick, thanks ;)

A blogger
Feb 5, 2011 at 7:43 pm

Thanks for the tip, nice CSS on this site.
The collapse / expand on the comments is a good idea.

Praveen Aithal H
Feb 11, 2011 at 7:05 am

Nice :) thanks a load

outline4
Mar 7, 2011 at 11:13 am

great tip!

I only knew the opposite:
white-space: nowrap
which is quite handy too…

and there seems to be a word-break tag too, but it’s only taking inherit as value…

cheers
stefan

Nick
Mar 16, 2011 at 12:43 pm

Why not use your trick instead of using an image as a demo?

Totti
Mar 29, 2011 at 2:40 am

Worth to mention that this doesn’t work if the parent element is set to:

white-space : nowrap;

dexx
Apr 17, 2011 at 2:51 pm

Associate researchers. Dr. Shah, people with ADHD “different thinking” they know better than laboratory measurements, but this situation in real life it could do with this work a success and said they did not know çevirmediklerini turn.

John
Apr 27, 2011 at 4:37 am

Doesn’t work with white-space:pre either. But awesome none the less

Stefan
May 5, 2011 at 9:26 am

Note that the css property only works with block level elements ..

eric
May 6, 2011 at 8:16 am

Doesn’t seem to have an effect on LEGEND tags in FF4, Chrome or IE7.

Charles Hand
May 31, 2011 at 8:59 am

Sometimes it works and sometimes it doesn’t. Any time someone has constructed an example, it works. But when I try to use it in actual practice, sometimes it works and sometimes it doesn’t. I wish there was some list of rules to determine when and where it is supposed to work. In one example, it doesn’t work on a div, unless the text within the div is in a p.

ToS
Aug 4, 2011 at 9:43 am

Try adding
white-space: normal;
to the element.

BlastFemur
Sep 1, 2011 at 6:08 pm

Thanks ToS!
This was exactly what worked for me.
I’m using .NET and in a GridView (TemplateField) trying to get a cell to linebreak. The original solution worked in IE9 but I kept getting “run-on” content in FireFox 6 and Opera 11 (not sure about Chrome).
Your solution fixed this cross-browser.

Classifieds India
Jun 7, 2011 at 7:12 am

very short solution for wordwrap. thanks for it.

alex
Jun 15, 2011 at 10:51 am

Nice tip! Bookmarked this!

cheatus
Jun 16, 2011 at 4:48 pm

Wow, that was extremely useful ! Thank you mate :]

Gamer
Jun 24, 2011 at 5:27 am

Do not function in table td tag within the firefox browser :(

Alt Design
Jun 30, 2011 at 5:25 am

Try with in-line style
I’ve read on a forum that works.

jugglinpete
May 8, 2012 at 8:30 am

Try using table-layout: fixed if using within tables (as well as the break-word bit).

Flats in Manchester
Jul 11, 2011 at 8:18 pm

Thanks a bunch for sharing this with all of us you actually know what you are talking about! Bookmarked. Kindly also visit my site =). We could have a link exchange contract between us!

swapna
Jul 21, 2011 at 6:39 am

Its very useful!!!!

Shane
Jul 27, 2011 at 11:23 pm

Thanks! Just what I needed!

sany
Aug 7, 2011 at 6:01 am

Just testing

sany
Aug 9, 2011 at 1:29 am

I love this page..

Bakiyaraj
Aug 11, 2011 at 1:08 am

Sorry.. its not working.. I used as follows :

blah blah…..

But it doesn’t seems to work.. Can anybody help me..?

Bakiyaraj
Aug 11, 2011 at 1:09 am

Sorry…

I used this style in para tag inside td tag.. Still it is not working…

Suggestion needed..

Rehan
Aug 19, 2011 at 5:02 am

worked! Thanks..

manoj
Aug 19, 2011 at 8:16 am

i m genrating dynamic text field and apply word press on this text field, in crome its not working right its take enter after every charecter, can u suggest me any best idea
the code is below:
var emphatic:TextFormat = new TextFormat();
dynamic_txtdis.type = “dynamic”
dynamic_txtdis._width = 200
dynamic_txtdis._height = 200
dynamic_txtdis.autoSize=true;
dynamic_txtdis.multiline=true;
dynamic_txtdis.htmlText = “Demo test is here for the testing purpose”;
dynamic_txtdis.border=true;
dynamic_txtdis.wordWrap=true;
dynamic_txtdis.html = true

dynamic_txtdis.setTextFormat(emphatic);

reda
Aug 27, 2011 at 5:57 pm

Thanks @Muz

In one place word-break:break-all worked when word-wrap: break-word; didn’t. You saved my night.

Cheers

TO
Aug 29, 2011 at 7:28 am

Great Solution Works prefectly with div tag and width style

cascas
Sep 4, 2011 at 5:55 am

asasadsa

PJM
Sep 15, 2011 at 6:18 am

i’d like to know how to shorten long texts?

NSR
Feb 16, 2012 at 7:28 am

You need to use the following:

/* Text overflow with ellipsis */
.ellipsis {
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}

This will only work in modern browsers. If older support is needed you’ll need to create a function in your relevant programming language.
For PHP, refer here: http://snippets.jc21.com/snippets/php/truncate-a-long-string-and-add-ellipsis/

sanjay
Sep 21, 2011 at 5:47 am

very useful property

private rentenvorsorge
Sep 28, 2011 at 12:55 pm

Am besten ist es teilnehmen in einen Wettbewerb für wahrscheinlich die größte Blogs im Internet. Ich werde Anwalt dieser site

ash smith
Sep 29, 2011 at 9:26 am

thankyou very much, just what I needed!

yudryh
Oct 3, 2011 at 8:22 am

ghghsrtyehtyrtttttttttytfryrdggfhgxfrutyisdyisujjjyy

Saurabh
Oct 12, 2011 at 1:37 am

I think it is very useful but width fix problem. So any solution?

tyrty
Oct 12, 2011 at 5:00 am

yrytryyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Arminder Dahul
Oct 17, 2011 at 4:44 am

Excellent thank you once again!

ji
Oct 27, 2011 at 3:50 am

jiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiijjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

Sarang
Oct 30, 2011 at 11:24 pm

Is it possible to have the wrapped text (second line) to be right aligned

This is for
testing

I want

This is for
Testing

Nexrun
Nov 22, 2011 at 3:01 pm

It should be possible Sarang
I think that is
Depends on if this worked
or not
But if this is all over the place justified
Then it worked

Jitender Kumar
Dec 3, 2011 at 4:08 am

I think it is very useful but your are type some ex. text:-(aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa) internet browser problem. So any solution?

Samir
Dec 7, 2011 at 1:14 pm

sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

Game
Dec 12, 2011 at 6:00 am

Unfortunately its not working in Firefox 8.0 :( or i did something wrong. Is it already standard in CSS3?

rani
Dec 21, 2011 at 3:49 pm

yes it worked for me.
thankyou.

Diego
Jan 30, 2012 at 3:44 pm

you saved my day. thank you!

Battx
Feb 2, 2012 at 10:15 am

Really helpful, many thanks.

NQT
Feb 25, 2012 at 9:11 am

I’ve tested. It works on Firefox 10 and IE 9, but not on Chrome.
I googled and found a solution:

.break-word {
word-wrap: break-word; /* Firefox & IE */
word-break: break-all; /* Chrome */
}

Richerd Ho
Mar 1, 2012 at 10:30 pm

Wow, great and useful. Thank you.

Sathish
Mar 8, 2012 at 8:16 am

Thanks man for your help.

prakash
Mar 14, 2012 at 8:55 am

its not working if word is to long (for example: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa)

really solution will be appreciated

janardhan
May 18, 2012 at 12:07 am

/* 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

Rick
Mar 14, 2012 at 2:22 pm

anybody know of a way to make it work with a long string like aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

for example?

thanks in advance!

Ted
Mar 20, 2012 at 4:17 am

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.

Rob Egginton
Mar 20, 2012 at 10:27 am

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.

Alaa
Aug 23, 2012 at 5:00 am

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

3e
Mar 22, 2012 at 1:09 am

erhfguerheimnvefvuhr

Ali
Mar 23, 2012 at 9:55 am

its works! supercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocious

Apil
Apr 21, 2012 at 1:40 am

Its work

Iggy
Apr 30, 2012 at 6:57 am

Must be block element and with fixed width to work.

TheBestData
May 16, 2012 at 5:58 am

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

janardhan
May 18, 2012 at 12:08 am

/* 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

gt
Sep 3, 2012 at 4:57 am

It doesn’t seem to work in Firefox 15.0

mn9or
May 24, 2012 at 7:44 pm

Not working with chrome :(

Greg Blass
Jun 13, 2012 at 8:37 am

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!

Greg Blass
Jun 13, 2012 at 8:39 am

Er, I meant that I can’t believe such a simple CSS property works in IE in general.

Vanessa Keeton
Jun 20, 2012 at 3:05 pm

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.

Dharmesh
Jun 22, 2012 at 5:52 am

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.

Izdelava strani David
Jul 12, 2012 at 3:54 pm

It still doesn’t work in my case, i will try to save it with pure php.

SM CROY
Jul 25, 2012 at 10:33 pm

Try: style=”word-break: break-all;”

Katie
Jul 30, 2012 at 2:43 pm

This solution worked for me in Chrome and Safari!

φωτοβολταικα
Jul 26, 2012 at 6:00 pm

Very short solution for wordwrap. thanks for it!

victor
Aug 6, 2012 at 3:26 pm

Great got my head done in with this word-wrap, lucky found your tut, sweet love your stuff…

Ilya Dyakov
Aug 21, 2012 at 3:09 pm

Breaks numbers in the middle like this:

1,2,…19,2
0,21,……
….88,99,1
00

Marcos KLA
Aug 26, 2012 at 3:07 pm

Thanks a lot from Spain!
“white-space:normal;” works perfectly!

gt
Sep 3, 2012 at 4:59 am

word break breaks a le
tter

and not a word of a se
tence

Gianni
Sep 5, 2012 at 3:04 am

It works for me, but it seems to break the “align:justify” in Outlook Express! :-(

Kevin
Sep 29, 2012 at 1:56 pm

Wow, thanks for the tip. You’ve saved me a headache :) Gotta love CSS3.

Gopal
Jan 30, 2013 at 5:14 am

It is not working in Chrome. I am writing it like:

prakash
May 24, 2013 at 7:00 am

May we put “-” when it breaks a word?
like
=> thisisalongw-
ord

Thank you.

DymoLabels
Jun 1, 2013 at 3:14 am

hi sir
Excellent post i like it
thanks for sharing
thanks

Stories about technology
Feb 5, 2019 at 4:35 am

When would you ever want to use normal over break-word?

Post Comment or Questions

Your email address will not be published. Required fields are marked *