CSS word wrapping causes huge spaces between words

Question

Hi! When the window is resized, the text automatically wraps to fit its container nicely. For this, I'm using this CSS code:

article {
    overflow: auto;
    word-wrap: break-word;
}

Though it seems, that this has no effect at all. When I remove this piece of code, the behavior doesn't change: the text is still wrapped near the end of the line.

I'm complaining about the huge gaps between words. I've observed a few webpages where no extra code is used for this and it still works nicely. Can you please help me get rid of the space? Thank you!

Answer 1

I agree that the text-align: justify has been inherited from the parent html tags. You could also try modifying the CSS as follows:

article {
    overflow: auto;
    word-wrap: break-word;
    text-align: start;
}

Answer 2

As mentioned in the comments article seems to be inheriting text-align: justify;. Here's a way to fix the alignment:

http://jsfiddle.net/awesome/zs394/2/

article, .unjust {
    /* regular */
    text-align: left;

    /* super strength */
    text-align: left !important;
}