Comments on: overflow-wrap https://css-tricks.com Tips, Tricks, and Techniques on using Cascading Style Sheets. Wed, 28 Sep 2022 17:16:55 +0000 hourly 1 https://wordpress.org/?v=6.1.1 By: TheDiveO https://css-tricks.com/almanac/properties/o/overflow-wrap/#comment-1766371 Wed, 23 Dec 2020 22:43:26 +0000 http://css-tricks.com/?page_id=250100#comment-1766371 Unfortunately, I hit a use case with a grid where some cells just had a single overflowing word in them. “overflow-wrap: break-word;” did not work here as expected and did not break inside this single “word” (at least on a recent Chrome).

A quick research revealed “overflow-wrap: anywhere;” which then gave me the desired outcome of breaking this single oversized word. I would have though that “overflow-wrap: break-word;” would already achieve that … so what I’m overlooking that “anywhere” does differently?

]]>
By: Owais Sonija https://css-tricks.com/almanac/properties/o/overflow-wrap/#comment-1755169 Thu, 19 Mar 2020 19:14:11 +0000 http://css-tricks.com/?page_id=250100#comment-1755169 Thank you! Really saved the day!

]]>
By: Louis Lazaris https://css-tricks.com/almanac/properties/o/overflow-wrap/#comment-1753188 Fri, 20 Dec 2019 04:02:56 +0000 http://css-tricks.com/?page_id=250100#comment-1753188 In reply to Sean Cowan.

I tested it and it works fine. If you can provide a link here to a demo where it’s not working, I’ll have a look.

]]>
By: Sean Cowan https://css-tricks.com/almanac/properties/o/overflow-wrap/#comment-1753179 Thu, 19 Dec 2019 18:07:54 +0000 http://css-tricks.com/?page_id=250100#comment-1753179 Still does not work in Chrome Version 79.0.3945.88 (Official Build) (64-bit)

]]>
By: Louis Lazaris https://css-tricks.com/almanac/properties/o/overflow-wrap/#comment-1729772 Mon, 24 Jun 2019 16:31:46 +0000 http://css-tricks.com/?page_id=250100#comment-1729772 In reply to (`・ω・)ノ☆・゚::゚.

Just to clarify something on this previous discussion:

The original demo uses hyphens: auto which I forgot about. Chrome still doesn’t support hyphens: auto. So Firefox adds the hyphen, Chrome does not. I think that’s why the original commenter was saying there is a hyphen visible. I was testing this in Chrome and did not realize Firefox had added that feature. So, yes, you can see a hyphen appear in some browsers.

]]>
By: Geoff Graham https://css-tricks.com/almanac/properties/o/overflow-wrap/#comment-1729685 Mon, 24 Jun 2019 14:38:21 +0000 http://css-tricks.com/?page_id=250100#comment-1729685 In reply to Jacob.

Hey Jacob! You might want to dig a little deeper with the browser’s DevTools. A super quick copy of your example seems to work out of the box, so maybe there’s something else at play in the rest of the CSS.

]]>
By: Jacob https://css-tricks.com/almanac/properties/o/overflow-wrap/#comment-1727910 Sat, 22 Jun 2019 22:53:22 +0000 http://css-tricks.com/?page_id=250100#comment-1727910 https://drive.google.com/open?id=1xy6gQGagGon77vfjL79GYCkzkM_v4Rba

So not sure if it’s my machine or what but… even tried >>all: unset;<< and it just refuses to wrap… Found tons of fiddles that just wraps by default… not sure what to do… any suggestions?

]]>
By: blund https://css-tricks.com/almanac/properties/o/overflow-wrap/#comment-1653846 Tue, 11 Dec 2018 22:13:59 +0000 http://css-tricks.com/?page_id=250100#comment-1653846 In reply to (`・ω・)ノ☆・゚::゚.

Indeed what you and Yongwei Wu are saying is true. This example shows hyphes: auto in action! You can tell by the hyphen itself. A fact that Louis is failing to observe. That is because, the word Pneumonoultramicroscopicsilicovolcanoconiosis CAN be hyphenated by the hyphenation algorithm.
But others shouldn’t – i.e. long strings of numbers, some special or repeated characters or mix of them, and for them hyphens won’t work (unless you are Safari, then expect unexpected..)

I is also true, that overflow-wrap: break-word would break the word in this example, as it will break everything but not necessarily in the same or correct way. And there will be no hyphen.

When used together, you can expect even weirder mixed (although sometimes correct) behaviour.

]]>
By: Louis Lazaris https://css-tricks.com/almanac/properties/o/overflow-wrap/#comment-1653590 Mon, 03 Dec 2018 15:27:45 +0000 http://css-tricks.com/?page_id=250100#comment-1653590 In reply to (`・ω・)ノ☆・゚::゚.

Not sure what you mean…? In what way is it there a hyphen visible?

]]>
By: (`・ω・)ノ☆・゚::゚ https://css-tricks.com/almanac/properties/o/overflow-wrap/#comment-1653091 Mon, 05 Nov 2018 22:40:44 +0000 http://css-tricks.com/?page_id=250100#comment-1653091 The text says a hyphen will not be inserted; however there is a superficial hyphen visible when toggling word-wrap; could some explanatory text be added regarding this?

]]>
By: Jan Oostende https://css-tricks.com/almanac/properties/o/overflow-wrap/#comment-1652980 Tue, 30 Oct 2018 15:09:59 +0000 http://css-tricks.com/?page_id=250100#comment-1652980 Very useful article. Helped me out.

]]>
By: Louis https://css-tricks.com/almanac/properties/o/overflow-wrap/#comment-1613590 Thu, 07 Dec 2017 06:57:16 +0000 http://css-tricks.com/?page_id=250100#comment-1613590 In reply to Yongwei Wu.

Hyphens is a different issue altogether. The properties discussed here behave a certain way when hyphenation is not present.

Hyphenation could have been discussed here, but that would cover too much ground. This is part of the “Almanac”, which discusses one feature at a time. You can look up hyphens under its own article (which is linked in the “Related” section).

]]>
By: Yongwei Wu https://css-tricks.com/almanac/properties/o/overflow-wrap/#comment-1613500 Sun, 03 Dec 2017 02:43:30 +0000 http://css-tricks.com/?page_id=250100#comment-1613500 This example demonstrates more of hyphens than overflow-wrap, as one can remove the wrap properties and the result will remain the same. I tested on Safari and Firefox, and they both honour hyphens, as opposed to what is stated in the article.

]]>