Web Designer Wall
Typography

Force Text to Wrap in CSS: overflow-wrap, hyphens and text-wrap

By Aigars Silkalns Updated 5 min read

Long, unbroken text such as a URL, email address or file name pushes out of its box because browsers only break lines at spaces and hyphens. overflow-wrap fixes it, and it is the modern form of the old word-wrap: break-word trick. Which value to use depends on the box.

The short answer

Use overflow-wrap: anywhere for flex and grid children and for user content. Use overflow-wrap: break-word for shrink-to-fit boxes such as buttons, chips and table cells.

.user-content { overflow-wrap: anywhere; }
.btn, .chip   { overflow-wrap: break-word; }

word-wrap is now just a legacy alias of overflow-wrap. Browsers keep it working, so old stylesheets are fine, but write the standard name in new code.

overflow-wrap: normal, break-word and anywhere

The property only breaks a word when it would otherwise overflow. It will never split a word that fits on a line, which is why it is safer than word-break.

  • normal is the default. Lines break only at normal opportunities, so a long string overflows.
  • break-word lets the browser break inside a word, but only after trying to fit it on its own line first.
  • anywhere behaves the same way for the visible result, with one extra effect: the soft break points count when the browser calculates the element’s min-content size.
Three cards with the same long file name: the default overflows the card, break-word and anywhere wrap it. Below, two flex rows with a Next button: break-word still overflows while anywhere wraps the file name.
The same unbroken file name in a narrow card, and in a flex row with a Next button.

Why break-word fails inside flex and grid

That min-content difference matters in layouts. A flex item has min-width: auto, which means it will not shrink below its min-content width. With break-word, soft break points are ignored for that calculation, so the item stays as wide as the whole string and overflows anyway, as the bottom-left example above shows. With anywhere the item can shrink, so the text wraps.

You can reach the same result with break-word by adding min-width: 0 to the flex or grid child. That is the more explicit fix when you only want to allow shrinking and do not want the side effect described below.

/* Option A: one property */
.card-title { overflow-wrap: anywhere; }

/* Option B: break-word plus an explicit shrink */
.flex-child {
  min-width: 0;
  overflow-wrap: break-word;
}

The side effect of anywhere is visible in the demo: because the string can now be squeezed, a neighbour without white-space: nowrap would be squeezed too, and the demo’s “Next” button needs that rule to stay readable. In shrink-to-fit contexts such as buttons, table cells with width: auto and inline-flex chips, anywhere can collapse the box to a sliver, because its min-content width becomes a single character. Use break-word there.

What about word-break?

word-break is the blunter tool.

  • word-break: break-all breaks between any two characters, even when the word would fit on the next line. It suits CJK-mixed content and monospace logs, and it makes ordinary English look ragged.
  • word-break: keep-all stops breaks inside Chinese, Japanese and Korean text, which is useful for short labels.
  • word-break: break-word is a deprecated value that behaves like overflow-wrap: anywhere. You will see it in older code. Replace it with overflow-wrap: anywhere.

Hyphenation with hyphens: auto

Breaking in the middle of a word with no marker is fine for URLs and poor for prose. For readable text, let the browser hyphenate using its dictionary:

article p {
  hyphens: auto;
  overflow-wrap: break-word; /* safety net for strings with no hyphenation points */
}

Hyphenation only works when the element has a language, so set <html lang="en"> (or the right code) and mark quotes in other languages with their own lang attribute. If you need control, insert &shy; (a soft hyphen) where a word may break, or <wbr> to offer a break with no hyphen, which works well inside long URLs you display as text. Dictionaries differ by browser and platform, so test the languages you actually publish.

hyphens: auto is most useful in narrow columns: cards, sidebars and justified text. It is rarely needed for headings.

Better line breaks: text-wrap

Forcing a wrap is one problem. Wrapping well is another, and text-wrap handles it.

  • text-wrap: balance evens out line lengths so a heading does not end with one orphaned word. Browsers limit it to a handful of lines, so it is meant for headings, captions and short quotes, and it is supported in all current major browsers.
  • text-wrap: pretty asks the browser to avoid short last lines and bad rag in body text. Support is not universal: Chromium browsers have it since version 117 and Safari since 26, but Firefox does not support it yet. Treat it as progressive enhancement: where it is unsupported, the paragraph simply wraps the normal way, so nothing breaks.
h1, h2, h3, blockquote { text-wrap: balance; }
p { text-wrap: pretty; }
Four cards comparing a default heading with a text-wrap balanced heading, and a paragraph without hyphens next to the same paragraph with hyphens auto
Balanced headings and automatic hyphenation, side by side.

A practical reset for user-generated content

Drop this into your base stylesheet, and comments, usernames, product names and table cells stop breaking layouts:

:where(h1, h2, h3, h4, blockquote) { text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }

.ugc,
.comment-body,
.card-title {
  overflow-wrap: anywhere;
}

td {
  overflow-wrap: break-word;
}

.prose {
  hyphens: auto;
  overflow-wrap: break-word;
}

Tables are a special case, which is why td gets break-word rather than anywhere. In an auto-layout table a cell’s min-content width decides the column width, and anywhere would let columns collapse to a few characters. For wrapping to take effect at all, give the table table-layout: fixed and a width, or a max-width on the cells. Otherwise wrap the table in a container with overflow-x: auto.

Truncate instead of wrap

Sometimes wrapping is the wrong answer. A single-line label in a nav bar or breadcrumb is better cut off with an ellipsis, or clamped to a few lines:

.one-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.three-lines {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

The prefixed -webkit-box form is still the one that works across browsers for multi-line clamping. The unprefixed line-clamp from the CSS Overflow spec is not yet shipping in stable Chrome, Safari or Firefox (it sits behind flags or in preview builds), so keep both declarations: browsers ignore the one they do not understand, and the prefixed pattern is specified behaviour that will keep working. If you truncate, expose the full text with a title or a way to expand it so no information is lost. Components such as a breadcrumb with wrapping arrows show how wrapping and truncation interact in real navigation.

97 comments from the archive

  1. 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.

  2. 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 :)

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

  5. 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

  6. AWESOME!

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

    Thanks again WebDesignerWall!

  7. 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.

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

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

  9. 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.

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

    Thanks for sharing this!

  13. websitereckon.com

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

    websitereckon.com

  14. 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)

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

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

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

  19. 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. ;(

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

  22. 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

  23. 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

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

  25. 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?

  26. 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?

  27. @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?

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

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

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

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

    Here is some content for the div element
    Files Sharing

  32. 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;(

  33. 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.

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

  35. 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.

  36. 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?

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

  38. 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.

  39. 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.

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

  41. 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.)

  42. 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.

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

  44. 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. %).

  45. 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.

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

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

    San Diego Mobile Notary

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

  51. 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

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

    white-space : nowrap;

  54. 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.

  58. 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.

    1. 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.

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

  60. 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!

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

    blah blah…..

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

  62. Sorry…

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

    Suggestion needed..

  63. 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);

  64. Thanks @Muz

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

    Cheers

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

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

    This is for
    testing

    I want

    This is for
    Testing

  70. 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

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

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

  73. 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 */
    }

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

    really solution will be appreciated

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

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

    for example?

    thanks in advance!

  76. 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.

    1. 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.

    2. 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

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

  79. 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!

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

  80. 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.

  81. 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.

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

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

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

    Thank you.

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

Comments are closed on this article.