Read More button wraps weirdly with long message

[TJScalzo]

When the message a the Read More button/box is too long, it will wrap to a second line. While it's good that it wraps instead of continuing outside the width of the article, it leaves white space to the right of the first line that looks weird.

Current Behavior: Desired Behavior:

According to this question and this answer on StackOverflow, there isn't easy way to get rid of the extra white space since the div defaults to the maximum width when its contents wrap. As those SO posts show, the "desired behavior" can be achieved with JS that manually resizes each box to eliminate the white space. But I think the easier solution is to just make the messages short enough to stay in one line. For example:

[TJScalzo]

Here's another example from "Now *this* is how you show off your new variable font."

Current Behavior: Desired Behavior: Shorter Message:

[tholman]

Adding a text-align: center will prob be the easiest fix here

[Haroenv]

I'm not weirded out enough yet is slightly shorter?

[tholman]

Yeah, totally should be keeping them short to prevent the wrap... centered it now anyhow, so its covered :)