← Back tothis vs that

word-break: break-all vs word-wrap: break-word

Written byPhuoc Nguyen
09 Sep, 2020


Assume that we have a string of `This is a sample text in a paragraph` displayed in a container that has limited width such as it can display 9 characters at maximum.
`word-break: break-all` will try to fit maximum characters in each line as it can. So there are words which are split into different lines such as text and paragraph like that:
/* word-break: break-all */
| This is a |
| sample tex|
| t in a par|
| agraph. |
On the other hand, `word-wrap: break-word` does not break the words that are able to fit in each line. So the text and paragraph words are not split in different lines.
/* word-wrap: break-word */
| This is a |
| sample |
| text in a |
| paragraph.|
If each line can contains a less number of characters, then `break-word` will break long words that are not fit in each line.
/* word-wrap: break-word */
| This is |
| a |
| sample |
| text in |
| a |
| paragrap|
| h. |

Good to know

  1. `word-wrap` was a non standard and unprefixed Microsoft extension. It was renamed to `overflow-wrap`.
    However, `word-wrap: break-word` is identical to `overflow-wrap: anywhere`, not `overflow-wrap: break-word`.
  2. A browser might break a long text at unexpected places. For example, the specific path (`/this/is/.../folder`) in the following text is placed at the second line:
    | Copy file to the folder: |
    | /this/is/a/very/long/path/to/the/destination/folder |
    To prevent this behavior, HTML5 provides the `<wbr>` element. It stands for Word Break Opportunity, and is used to specify the positions that a line break would be created.
    Getting back to the example above. If we use `<wbr>` elements right before each path separator (`/`) as follow:
    Copy your file to the folder: <wbr />/this <wbr />/is <wbr />/a ... <wbr />/destination <wbr />/folder
    The browser will break the paths in between the directory names:
    | Copy your file to the folder: /this/is/a/very/long |
    | /path/to/the/destination/folder |
    Note that `<wbr>` element is not supported in IE 11 and earlier versions.

Questions? 🙋

Do you have any questions? Not just about this specific post, but about any topic in front-end development that you'd like to learn more about? If so, feel free to send me a message on Twitter or send me an email. You can find them at the bottom of this page.
I have a long list of upcoming posts, but your questions or ideas for the next one will be my top priority. Let's learn together! Sharing knowledge is the best way to grow 🥷.

Recent posts ⚡

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.
By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.
Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.
Phước Nguyễn