Post Overflow

Question

In replying to Text Alignment Problem on SO, hyperslug wondered what would happen if a non-breaking character string was added to a post. What he discovered is that unlike a code block which wraps things up with scrollbars the non-breaking string overflows the post element div. A modification to the .post-text CSS is warranted to prevent this behavior.

Example of Problem. eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeewwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

Answer 1

The word-wrap:break-word suggestion is a good one.

Works fine on posts, which are fixed width, and that is implemented.

Near as I can tell, there is no way to get this to work on comments because they are variable width. That is, the actual comment size depends on whether or not the comment vote UI controls are present (fex, on your own comment, you don't have controls, if you're not logged in there are no controls, etc), and if the comment has say 100 upvotes that's wider still.

edit: because we loop through comments on the fly for rendering anyway, we are now force-inserting a soft hyphen boring unicode spaces every so many characters without a space. So this should be truly fixed now.

Answer 2

Adding the CSS rule:

.post-text { overflow: hidden; } 

Appears to fix it up nicely.

Answer 3

日本語にもこの表示問題ありますか？タイ語はわかりませんが、日本語では（絵本を除いて）空白があまり無いです。この一行を長くするには「あいうえおあいうえおあいうえおあいうえお」と入力させていただきます。

そして記号の入ってない空白の無い一行：

あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお

Japanese doesn't really have the concept of spaces, but is also not picky about wrapping. Japanese text will (and should) usually wrap after the last character that fits on a line, as is illustrated here. There are no spaces in the above text except two empty lines where you see them, so this is being handled correctly (most likely by the browser).

I would imagine Thai and other languages without spaces are handled similarly, leaving this problem only to languages with spaces.

Answer 4

Please add word-wrap: break-word; to comments, questions and answers.

That's all folks. Please don't make me add another greasemonkey script for such a thing.

Answer 5

Comments have this problem too apparently. See my test above.

Answer 6

The only solution that I know of is to insert <wbr> tags into the long words. If it was done at punctuation marks like .-_ etc. it shouldn't be too costly.

Answer 7

Whatisanyonetryingtolegitimatelycommunicatewithalongunbrokenstringofsufficientlengthtooverflowtheelement?alsoacodetagdoesn'thavetohavecodeinitsointhelegitimatecaseusethat.

Answer 8

Stack Comment overflow:

This bugged me, so I came up with the following fix:

td.comment-text div
{
    display: block !important;
    word-wrap: break-word !important;
    width: 624px !important;
}

Result:

---

Note: In the thread where the screenshots are from, I also discussed another CSS fix related to <kbd>: http://meta.superuser.com/a/4791/100787