word-break: break-all vs word-wrap: break-word
Written byPhuoc Nguyen
Category
CSS
Created
09 Sep, 2020
#Difference
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
-
`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`
. -
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 />/folderThe 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 ⚡
Copy the content of an element to your clipboard
01 Oct, 2023
Make a text area fit its content automatically
30 Sep, 2023
Quickly insert alternate characters while typing
30 Sep, 2023
Zebra-like background
30 Sep, 2023
Add autocomplete to your text area
28 Sep, 2023
Linear scale of a number between two ranges
28 Sep, 2023
Highlight the current line in a text area
27 Sep, 2023
Create your own custom cursor in a text area
27 Sep, 2023
Mirror a text area for improving user experience
26 Sep, 2023
Display the line numbers in a text area
24 Sep, 2023
Select a given line in a text area
24 Sep, 2023
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