46

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

8
  • Does this happen in the title too? Or on the question listings when the first line contains this.
    – akarnokd
    Jul 15 '09 at 7:47
  • 38
    Stop attacking the Related list! It's only trying to help!
    – random
    Aug 19 '09 at 0:38
  • Reverse duplicate: meta.stackexchange.com/questions/41068/…
    – Pollyanna
    Mar 4 '10 at 2:11
  • "@John Rasch Oy! You got your Unicode in my ASCII!" stackoverflow.com/questions/1732348/… Mar 4 '10 at 3:11
  • It looks fixed on my firefox browser. Nov 4 '10 at 7:27
  • Looks like this is only fixed for ASCII / other normal characters. It can still happen in very extreme cases
    – Lukas Eder
    May 14 '12 at 12:03
  • Post Overflow is solved now we have comment overflow. eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeewwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
    – Sandeep
    Feb 22 '16 at 11:18
  • @SandeepBiradar in his answer Jeff mentions that when post overflow was fixed he didn't fix comment overflow. Not sure if this was ever fixed in the intervening years.
    – ahsteele
    Feb 22 '16 at 14:39
15

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.

12
  • 6
    i don't think it'd be that hard to give the comments fixed width. they only vary by about 45 pixels from anonymous+no votes to logged-in+10 to 99 votes. 50px probably would be enough room for 100-999 votes, and beyond that you could do "1k". (do any comments have 1000+ votes yet?) i don't think having a constant 50px left indention on all comments would be that distracting.
    – Kip
    Mar 18 '10 at 21:07
  • 5
    So it's not really [status-completed] then.
    – Ether
    May 11 '10 at 4:09
  • 1
    @ether I'm not willing to make comments fixed size at the moment. I thought about checking server side by looping through the string and forcing spaces every (n) characters if there aren't any just to prevent griefing. May 11 '10 at 6:19
  • Please do not overdo using pixels to measure things. The sites scale pretty badly as it is :( Nov 1 '10 at 18:37
  • Too bad, somehow Firefox 4 is ignoring those soft hyphens, at least in <code> blocks. I guess that's a Firefox issue, but still.
    – Arjan
    Apr 16 '11 at 11:45
  • Same issue for normal, long comments in Firefox, so it's not only ignoring the soft hyphens in code fragments. (My previous comment was about comments too, by the way.)
    – Arjan
    Apr 18 '11 at 7:42
  • Can you do this for comments in the moderator dashboard too? See i.stack.imgur.com/NJULm.png for instance.
    – mmyers
    Aug 1 '11 at 20:22
  • I'm not testing this, but the spaces aren't inserted in pre blocks, are they? May 6 '12 at 3:32
  • 1
    @balpha, just to be sure: inserting zero width whitespace breaks pasting code from comments. (Hence, I liked the visible soft hyphens slightly better.) But I wouldn't know another solution, other than inserting regular whitespace, which at least is visible! Or maybe using <span style="margin:0"><code>first</code><code>second</code></span>?)
    – Arjan
    Jun 16 '12 at 13:58
  • @Sonic you can't really re-write history. Even if now things are different, what's written here is a response to some old bug report. Do not change it. Jan 12 '20 at 9:31
  • @ShadowTheBurningWizard I've done this before several times with no complaint; this is the first complaint I've received regarding this. Jan 12 '20 at 18:55
  • @Sonic it's fine in a FAQ or even support question, but this is just an old bug report. We shouldn't re-write the answers to bug reports, IMO. Jan 13 '20 at 7:13
9

Adding the CSS rule:

.post-text { overflow: hidden; } 

Appears to fix it up nicely.

1
6

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

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

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

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.

2
  • 10
    indeed. Letusalllearntolivewithoutspacesinourlanguage. Onlythencanweavoidthewrappingissue, andfunctionaccordingtothegraddesign.
    – jweede
    Sep 3 '09 at 17:03
  • I just used firebug, too, to put overflow:hidden, overflow:auto, and word-wrap:break-word on your post and it didn't magically start distorting things either. That's not exactly an exhaustive study, but it goes to bolster the point that there's no reason not to address the issue. (No non-English language difficulties would seem to result.)
    – user141160
    Mar 4 '10 at 10:41
6

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.

4

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

2

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.

1

Whatisanyonetryingtolegitimatelycommunicatewithalongunbrokenstringofsufficientlengthtooverflowtheelement?alsoacodetagdoesn'thavetohavecodeinitsointhelegitimatecaseusethat.

7
  • 16
    Maybe someone wants to know how to fix their broken space key.
    – kaba
    Jul 15 '09 at 7:54
  • 2
    It would be an issue with languages without spaces, like Thai.
    – Leonardo
    Jul 15 '09 at 8:03
  • Wow Thai has no spaces! interesting... Jul 15 '09 at 8:05
  • 1
    Actually Thai does have spaces, used like full stops in english so there will be less of them in a typical text. Jul 15 '09 at 8:46
  • I think you're trying to communicate something but I can't tell because your text flows under the related box. Very annoying! Jul 16 '09 at 20:35
  • Cut'n'Paste into notepad Jul 17 '09 at 8:47
  • @HollyStyles: Here is an example of a real case where the text overflowed without the user being malicious: stackoverflow.com/questions/1296571/…
    – Kip
    Aug 19 '09 at 15:12
1

Stack Comment overflow:

before

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:

after


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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .