Search code examples
cssinternet-explorerfirefoxline-breaks

Word break doesn't work in FF and IE

I have faced a problem with word-wrap: break-word; property in IE and FF. In Chrome the text looks good, if it overflows its parent Chrome tries to split text by spaces and if it has no spaces Chrome just break all the word:

enter image description here

But in IE and FF this rule doesn't work

enter image description here

I can add break-all in this case the browser spit the union word but it doesn't look good with the words that have spaces

enter image description here

Solution

  • Actually word-wrap: break-word; isn't always the good solution while breaking overflowing sentences. As it breaks the words of the sentence which remove the actual meaning of the word OR better to say make it unreadable.

    So while using word-wrap: break-word; try considering white-space: pre-wrap; which only breaks the sentence the meaningfully that means the word accessibility can break into

    access
    ibility

    but if we use white-space: pre-wrap; it will always give you

    accessibility

    Here I've created a JSFiddle.

    p {word-wrap: break-word; white-space: pre-wrap;}

    Hope it will work for you.