css word-wrap vs word-break - Brave Search

What is the difference between "word-break: break-all" versus "word-wrap: break-word" in CSS?

stackoverflow.com › questions › 1795109 › what-is-the-difference-between-word-break-break-all-versus-word-wrap-break

word-wrap: break-word recently changed to overflow-wrap: break-word

will wrap long words onto the next line.
adjusts different words so that they do not break in the middle.

word-break: break-all

irrespective of whether it’s a continuous word or many words, breaks them up at the edge of the width limit. (i.e. even within the characters of the same word)

So if you have many fixed-size spans which get content dynamically, you might just prefer using word-wrap: break-word, as that way only the continuous words are broken in between, and in case it’s a sentence comprising many words, the spaces are adjusted to get intact words (no break within a word).

And if it doesn’t matter, go for either.

Answer from Bhumi Singhal on Stack Overflow

stackoverflow.com › questions › 1795109 › what-is-the-difference-between-word-break-break-all-versus-word-wrap-break

What is the difference between "word-break: break-all" versus "word-wrap: break-word" in CSS? - Stack Overflow

word-wrap: break-word recently changed to overflow-wrap: break-word

will wrap long words onto the next line.
adjusts different words so that they do not break in the middle.

word-break: break-all

irrespective of whether it’s a continuous word or many words, breaks them up at the edge of the width limit. (i.e. even within the characters of the same word)

So if you have many fixed-size spans which get content dynamically, you might just prefer using word-wrap: break-word, as that way only the continuous words are broken in between, and in case it’s a sentence comprising many words, the spaces are adjusted to get intact words (no break within a word).

And if it doesn’t matter, go for either.

The W3 specification that talks about these seem to suggest that word-break: break-all is for requiring a particular behaviour with CJK (Chinese, Japanese, and Korean) text, whereas word-wrap: break-word is the more general, non-CJK-aware, behaviour.

developer.mozilla.org › en-US › docs › Web › CSS › Guides › Text › Wrapping_breaking_text

Wrapping and breaking text - CSS - MDN Web Docs

Note: The overflow-wrap property acts in the same way as the non-standard property word-wrap. The word-wrap property is now treated by browsers as an alias of the standard property. An alternative property to try is word-break. This property will break the word at the point it overflows.

Discussions

Is there a property like word-wrap or overflow-wrap that can force breaks at word boundaries?

What you're asking is the default behaviour of text, look at the property's name "break-word", that means it'll split a word when there's no space available, if you don't want to split the word but instead you want the words to wrap then you don't need to add break-word. More on reddit.com

r/css

13

3

December 11, 2021

html - Difference between word-wrap: break-word and word-break: break-word - Stack Overflow

I needed to fix some CSS somewhere because my text wasn't wrapping around and was instead going on indefinitely if it was an extremely long word. Like in most cases, I tried word-wrap: break-word;... More on stackoverflow.com

stackoverflow.com

When to use CSS text-wrap: balance; vs text-wrap: pretty;

I didn't know that "text-wrap:pretty" existed. I wish they had taken my advice for what to call it: "text-wrap:orphan-killer". 😈 More on reddit.com

r/css

5

7

November 14, 2023

Word Wrap not working as expected

Hello. I am working on my site https://gcse.work. I am struggling to get word wrap to behave as I wish. Here are all the options I have tried and what I want/expect. What am I doing wrong and what (even if vanilla css) can I do to get my desired word wrap? More on reddit.com

r/tailwindcss

3

1

January 30, 2023

Videos

🚫 Prevent Text Overflow in CSS || Word Break vs Overflow Wrap ...

November 9, 2024

CSS Text Wrapping, Breaking & Hyphens - YouTube

February 3, 2023

How do you wrap long words in CSS? - YouTube

November 6, 2019

The word-break property in CSS - use this to handle text overflow!

How To Wrap Text With CSS Tutorial - YouTube

February 19, 2020

How do you wrap long words in CSS?

November 6, 2019

developer.mozilla.org › en-US › docs › Web › CSS › Reference › Properties › word-break

word-break - CSS - MDN Web Docs

Has the same effect as word-break: normal except that language-specific analysis is performed to improve word breaks by not placing them in the middle of natural phrases. ... Has the same effect as overflow-wrap: anywhere combined with word-break: normal, regardless of the actual value of the ...

geeksforgeeks.org › css › what-is-the-difference-between-word-break-break-all-versus-word-wrap-break-word-in-css

CSS word-break vs word-wrap (Overflow Wrap) : What's the Difference ? - GeeksforGeeks

June 7, 2025 - The break-all box shows words being broken abruptly, even mid-word, while the break-word box wraps more cleanly at word boundaries. This comparison visually demonstrates when and why to choose each property.

tympanus.net › codrops › css_reference › word-wrap

word-wrap | Codrops

December 11, 2016 - The two properties (word-break and word-wrap) differ rules and overflow of words: as mentioned earlier, word-wrap is used to break words that overflow their container, while the word-break property breaks all words at the end of a line, even those that would normally wrap onto another line ...

blog.logrocket.com › home › a complete guide to css word-wrap, overflow-wrap, and word-break

A complete guide to CSS word-wrap, overflow-wrap, and word-break - LogRocket Blog

June 4, 2024 - For example, setting the value of white-space CSS property to nowrap will disable wrapping. Forced line breaks are caused by explicit line-breaking controls or line breaks marking the end or start of blocks of text. The name word-wrap is the legacy name for the overflow-wrap CSS property.

codersblock.com › blog › deep-dive-into-text-wrapping-and-word-breaking

Deep Dive into Text Wrapping and Word Breaking / Coder's Block

See how word-break: break-all moves the “k” down to avoid starting the second line with “.”? Meanwhile, line-break: anywhere doesn’t care. Let’s see how the CSS properties we’ve covered so far handle excessively long spans of punctuation. See the Pen Excessive Punctuation by Will Boyd (@lonekorean) on CodePen. overflow-wrap: break-word and line-break: anywhere are able to keep things contained, but then there’s word-break: break-all being weird with punctuation again — this time resulting in overflowing text.

Find elsewhere

Google Bing Mojeek

medium.com › @igorshevchenko › wrapping-text-in-html-52a76c3c75d4

Wrapping text in HTML. word-break and overflow-wrap | by Igor Shevchenko | Medium

March 24, 2017 - If overflow-wrap:break-word;(word-wrap:break-word) is used, long long word will try to fit in the line, jump to the next one if there was not enough space in the first one, and then break, only when there is not enough space on the second line. On the other hand, if word-break:break-all; is used, the word will simply be broken as soon as there’s not enough space on the line. https://drafts.csswg.org/css-text-3/#propdef-word-wrap

css-tricks.com › almanac › properties › w › word-break

word-break | CSS-Tricks

July 12, 2021 - Instead of just having every word at the end of the line break, regardless of length? ... This code works for me wonderfully. white-space: pre-wrap; /* css-3 / white-space: -moz-pre-wrap; / Mozilla, since 1999 / white-space: -pre-wrap; / Opera 4-6 / white-space: -o-pre-wrap; / Opera 7 / word-wrap: break-word; / Internet Explorer 5.5+ */

zuga.net › articles › css-word-wrap-vs-word-break

Zuga.net | CSS - word-wrap vs. word-break

The CSS property word-wrap (renamed to overflow-wrap in CSS3 to better reflect its intended purpose) specifies whether a word may be broken at an ... The CSS property word-break specifies whether a break may occur within a word.

reddit.com › r/css › is there a property like word-wrap or overflow-wrap that can force breaks at word boundaries?

r/css on Reddit: Is there a property like word-wrap or overflow-wrap that can force breaks at word boundaries?

December 11, 2021 -

For example, If I have a sentence like the following:

I like cute dogs because they're awesome

doing something like word-break: break-word might give you

I like cute dogs because they're awe
some

The behavior I want is for it to break like

I like cute dogs because they're
awesome

I can't seem to find a way to do this. Thanks for the help and cheers.

The text is rendered inside of a container, and the width of the container typically succeeds in efficiently distributing the inner text, but not in all cases. There are weird cases of overflow, even for words whose length is only a fraction of the available width.

What you're asking is the default behaviour of text, look at the property's name "break-word", that means it'll split a word when there's no space available, if you don't want to split the word but instead you want the words to wrap then you don't need to add break-word.

Have you considered just adding a
where needed?

kenneth.io › post › word-wrappinghyphenation-using-css

Word wrapping/hyphenation using CSS. | Kenneth Auchenberg

To fix this, I discovered, that you can use word-break: break-word which seems to be an undocumented and non-standard property value in WebKit. This makes the word wrapping behave like word-wrap: break-word, but works with dynamic widths.

reddit.com › r/css › word-break vs word-wrap (or overflow-wrap). what's the difference and how to efficiently use both together?

r/css on Reddit: Word-break VS Word-wrap (or overflow-wrap). What's the difference and how to efficiently use both together?

February 5, 2024 - Both break words but it seems they are different and can work together. Word-break: Break all, Keep all, normal. Word-wrap (now know as Overflow-Wrap): Normal, Anywhere, Break-word.

css-tricks.com › almanac › properties › o › overflow-wrap

overflow-wrap | CSS-Tricks

September 28, 2022 - A string of non-breaking space characters ( ) would be treated the same way and would also break at an appropriate spot. overflow-wrap is useful when applied to elements that contain unmoderated user-generated content (like comments sections).

w3schools.com › cssref › css3_pr_word-wrap.php

CSS word-wrap property

The word-wrap property allows long words to be able to be broken and wrap onto the next line. ... The numbers in the table specify the first browser version that fully supports the property.

developer.mozilla.org › en-US › docs › Web › CSS › Reference › Properties › overflow-wrap

overflow-wrap - CSS - MDN Web Docs

November 7, 2025 - The overflow-wrap property is specified as a single keyword chosen from the list of values below. ... Lines may only break at normal word break points (such as a space between two words).

stackoverflow.com › questions › 35251135 › difference-between-word-wrap-break-word-and-word-break-break-word

html - Difference between word-wrap: break-word and word-break: break-word - Stack Overflow

Update

If you plan on breaking words and want to hyphenate as well, try the following:

.hyphenate {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

This worked even in Chrome ... sort of ... sans hyphens. Anyways a detailed explanation is in this article.

word-break:break-word is not documented and only master developers know this ultra secret technique like the Quivering Palm of Death.

Actually it's an obscure -webkit- property that works like word-wrap: break-word but it's also used on dynamic lengths as well.

Kenneth.io - Word Wrapping Hypernation Using CSS

CSS-Tricks - word-break

From CaniUse:

Chrome, Safari and other WebKit/Blink browsers also support the unofficial break-word value which is treated like word-wrap: break-word.

developer.mozilla.org › en-US › docs › Web › CSS › overflow-wrap

overflow-wrap - CSS - MDN Web Docs - Mozilla

August 9, 2025 - To prevent overflow, an otherwise unbreakable string of characters — like a long word or URL — may be broken at any point if there are no otherwise-acceptable break points in the line. No hyphenation character is inserted at the break point. Soft wrap opportunities introduced by the word break are considered when calculating min-content intrinsic sizes.

blog.hubspot.com › website › css-wordwrap

Everything You Need to Know About CSS Wordwrap

September 28, 2022 - See the Pen css wordwrap - word-break by HubSpot (@hubspot) on CodePen. As you can see, break-all adds a break every time a word would otherwise overflow (for non-CJK text). This behavior is similar to overflow wrap: break-word in that it causes a break in a word that would otherwise overflow.

answertabs.com › long-words-in-table-css-word-wrap-and-word-break-difference

Long words in Table: CSS word-wrap and word-break - difference

May 20, 2025 - Word-break specifies how words should break when reaching the end of a line. To prevent overflow and keep the table width, I use word-break: break-word;. When I use word-wrap, the words are broken differently in each cell (column) and the table gets a bit wider than required.