Techniques to Break Words

A sign near a cliff, broken nearly in half with the left side missing. The visible text is “UTION! e cliffs have mbling edges ase keep clear.”
Photo by studio tdes. Used under CC BY 2.0 Deed. Image cropped and contrast enhanced.

A few days ago Benjy Stanton asked about breaking long words in tables. I offered a suggestion, which may or may not have worked. I never asked.

My failure to follow up aside, it reminded me that I have had to walk clients through text wrapping and word breaking more than once. I decided I wanted a blog post dated 29 February, so I took a demo I had for word breaking, beat it up a bit, and rushed this post out.


I made a page that allows you to play around with a few variations on breaking words. I use long single words in English, German, Hebrew (right-to-left), Hindi, Japanese, and Arabic (right-to-left). They are probably all terrible examples since I speak none of those. I also have a long web page address and a long email. Then I replicate those each into a table.

The buttons allow you to toggle table layout, which CSS properties you use, and the width of the containers so you can see where else words will break. You can visit the debug mode and run it full screen if that helps.

See the Pen Techniques to Break Words by Adrian Roselli (@aardrian) on CodePen.

CSS Bits

The samples are all affected by CSS, but the first of the boxes uses only CSS to achieve the word breaking.


The tables are set to 100% wide. With this set, you can toggle table-layout: fixed on and off. When active, the browser tries to fit the table into that defined width, which means all sorts of overflowing and word breaking. This only applies to the tables at the bottom of each block.

When the words break, how they break is affected by what follows.


For this option, I set word-break: break-all, which breaks words anywhere the browser wants in order to try to fit in the defined width. It ignores any breaking cues you provide. Chinese, Japanese, and Korean (CJK) text is supposed to be exempted from this.

This approach adds no hyphens. It just snaps a word wherever.


I am using overflow-wrap: anywhere because it is the most aggressive of the overflow-wrap values. It will try to honor any breaking cues you provide within the word

This approach also adds no hyphens — unless you provide hints (which I cover below).


This might be the property you expected. The hyphens: auto will break words and add hyphens based on the language (lang) and the browser’s own dictionary.

The browser may not get foreign language hyphenation right.

hyphens: manual

I don’t have a button for this option. The last column has hyphens: manual so you can compare it alongside the other columns. It only works with the soft hyphen character, which is a great opportunity for me to transition…


Columns two, three, and four use HTML to signal where to break words. The same CSS is applied to them as the first column, but you can see different impacts in these three columns.


The word break element, <wbr>, tells a browser that where it sits is a perfectly fine place to break a word. If it wants.

It will not add hyphens. Probably reserve this for web page addresses, emails, code, or other places where transcription accuracy is critical.

Here is the position of all the <wbr>s in the English word, the web address, and the email:





The soft hyphen isn’t really HTML, but you stuff it into your HTML page in order for it to work. While &shy; is meant to work with hyphens: manual, it does its job when you don’t set it at all.

Unlike <wbr>, you should add &shy; only where you know a word should break. You can compare the first and last columns of the demo to see where they mismatch. Probably don’t do it on words in a language you don’t know.

Here is the position of all the &shy;s in the English word, the web address, and the email:




Other Bits

Rounding out the buttons in the demo.


CSS (and browsers) allow you to override the default character with hyphenate-character: <string>. I include a field where you can provide you own string, but just for the lulz. Probably never do this unless you are a linguist or one is threatening you.

If you leave the field blank it will revert to auto.


By default the columns are 6em wide. You can change that to see other places the words may break. If you leave the field blank the columns revert to 6em.

Final Bits

My suggestions:

The demo is simply a demo. It exists solely to let you compare a few styling options and where they intersect with some HTML efforts. My breaks and hyphens are arbitrary. My non-English words are probably laughably wrong (especially where I put the &shy; in the Hindi word). I use MDN links throughout, but I encourage you to go directly to the specs once you grok the more human-oriented MDN content.



As a german native speaker : It’s “Schifffahrt” (note the triple “f”), so it should be “Donaudampfschifffahrtsgesellschaftskapitän”.
Anyways, great article as usual!

deltragon; . Permalink
In response to deltragon. Reply

And this comment made me notice that the text in the comment box overflows instead of breaking (at least on Firefox Android).
I am tempted to test if adding soft hyphens works/helps.

deltragon; . Permalink
In response to deltragon. Reply

Thanks! I added the third f to all 8 instances in the demo. Without knowing where to put the <wbr> / &shy;, I put it before the final third f in case.

And to answer your question, since I let the comments boxes overflow with scrollbars instead of forcing word breaks, I am also curious how the word would break (it does not in your comment on Android Firefox, but should here since this nested comment is narrower).

With &shy;: Don­aud­ampf­schiff­fahrts­ges­ell­schafts­kap­it­än

With <wbr>: Donaudampfschifffahrtsgesellschaftskapitän


Thanks for taking the time to write this (and for your initial suggestion). Very helpful! I still need a bit more time to work through and try and the different approaches. I expect applying some learning from your Under-Engineered Responsive Tables post will help us too.

In response to Benjy Stanton. Reply

I am glad this may be helpful. If you find some wonkiness in your own testing, please pop back here and let us know.

In response to Adrian Roselli. Reply

Just reporting back to say that I’ve used a few of these techniques and it’s working well in the browsers we’re targeting (Chrome and Edge).

Here’s what worked for us…

– Add overflow-wrap: break-word;
– Add table-layout: fixed; (to make break-word work)
– Adding specific widths e.g. width:20% to columns we know will have longer strings of user generated content
– Add &shy; to longer words in header cells to help them break nicely

Thanks again!

In response to Benjy Stanton. Reply

I am glad you found an approach that works for you. Bear in mind that break-word is a blunt instrument (using a rocket to swat flies), so be sure to spot-check occasionally it and maybe check in with users who have dyslexia or don’t have English as their first language.

Leave a Comment or Response

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>