CODEWITHSUNDEEP
csslayout
Asa Carter
Asa Carter

Reputation: 2225

CSS break-word not breaking words

In the demo below, I am trying to wrap text in small container (narrow browser width) and break the words with a hyphen.

There is a 5px padding but the right padding seems to be off screen along with some of the text.

DEMO:

https://jsbin.com/lajesilefi/edit?html,css,output

Upvotes: 0

Views: 66

Answers (1)

user2622348
user2622348

Reputation: 145

You have the propery word-break in there twice. Remove the second line 

word-break:break-all;
word-break:break-word; <-- remove that line

Also as Germano Plebani suggests, remove those lines:

min-width: 100%;
width: 100%;
max-width: 100%;

Then it should work fine.

In addition to that I would suggest to use a margin instead of a padding in your #notification .ra-content block, so the last bit of the text does not disappear

https://jsbin.com/nudixewibu/1/edit?html,css,output

Upvotes: 1

Related Questions