CODEWITHSUNDEEP
htmlcss
Badal Singh
Badal Singh

Reputation: 479

Overflow-wrap property is not working properly

By default , it there's a long word at the end of a line which cannot fit in the remaining space , it's automatically shifted to a new line.

This property is used in such cases to make break the word letting it take the remaining space as much it can before shifting rest part of the long word to another line. (At least from what I understood).

I gave this property a try but it doesn't seem to work well for some reason.

div {
  overflow-wrap: break-word;
  hyphens: auto;
  width: 100%;
}
<div>
This is the first time I've seen the word Pneumonoultramicroscopicsilicovolcanoconiosis. It's a long one
</div>

The longer word in my example instead of breaking down just normally shifts to new line ignoring this property.

After a little bit of googling, I found a property which works similarly: word-wrap: break-word;. So I replaced overflow wrap with it. It didn't work so I kept both of them together, but that still didn't worked.

To better understand my question ( if according to you my output is fine ) then please check this

Edit - my issue is fixed but the explanation i had given for this property above is wrong The old name of this property is word-wrap

And this being a property with new name , i wouldn't anyone to get wrong info through my question so here's a correct example and explaination of what this property does which i wrote - https://del.dog/qeraracita.coffeescript

Upvotes: 1

Views: 2205

Answers (3)

rlemon
rlemon

Reputation: 17666

The example you are using as your "proper break" from CSS-Tricks (https://css-tricks.com/almanac/properties/o/overflow-wrap/) has a non breaking space between 'Word' and the long word, making it a single word to break up, hence the difference you see between where the word breaks in your code and the example. 

<p>This is the first time I've seen the word&nbsp;Pneumonoultramicroscopicsilicovolcanoconiosis. It's a long one.</p>

remove that extra non breaking space and the word break happens how it does in your demo. https://codepen.io/rlemon/pen/MWgxXmK

so to solve your problem, add back in the non breaking space and let it treat those two words as one.

Upvotes: 3

aqua
aqua

Reputation: 23

I'm not seeing the unexpected behavior. Here is a Codepen demonstrating overflow-wrap.

HTML

<div>
<p>This is the first time I've seen the word Pneumonoultramicroscopicsilicovolcanoconiosis. It's a long one</p>
<div>

CSS

div {
  max-width: 100px;
  border: 1px solid red;
}

p {
  overflow-wrap: break-word;
}

Upvotes: 0

Fleflis
Fleflis

Reputation: 29

First of all, you're applying these properties to all elements with the.div class, not the div element itself. Remove the dot ('.') on the CSS selector.

If it still doesn't work, use the HTML entitie &shy;. Its an hypen that doesn't appear until the word is broken. This is great, so you can tell the browser where it should break (same as <wbr>, but with hypen).

Example:

<div> 
This is the first time I've seen the word 
&shy;ultra&shy;microscopic&shy;silico&shy;volcano&shy;coniosis. It's a long one.
</div>

Hope this helps!

Upvotes: 0

Related Questions