your communities

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

share|improve this question
    
Does this happen in the title too? Or on the question listings when the first line contains this. –  kd304 Jul 15 '09 at 7:47
33  
Stop attacking the Related list! It's only trying to help! –  random Aug 19 '09 at 0:38
    
Reverse duplicate: meta.stackoverflow.com/questions/41068/… –  Adam Davis Mar 4 '10 at 2:11
    
"@John Rasch Oy! You got your Unicode in my ASCII!" stackoverflow.com/questions/1732348/… –  Andrew Grimm Mar 4 '10 at 3:11
    
It looks fixed on my firefox browser. –  Andrew Grimm 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
add comment

9 Answers

up vote 13 down vote accepted

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.

share|improve this answer
5  
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
3  
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. –  Jeff Atwood May 11 '10 at 6:19
    
Please do not overdo using pixels to measure things. The sites scale pretty badly as it is :( –  Mariano Suárez-Alvarez 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? –  Manishearth May 6 '12 at 3:32
    
@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
add comment

Don't see how this could be considered by-design.

share|improve this answer
6  
Seems like there should be a "status-nogoodsolution" ... Would be more appropriate. –  ベレアー アダム Aug 19 '09 at 2:39
5  
except there are good solutions. The CSS rule word-wrap: break-word; is supported in the newer browsers, which handles this quite well. And overflow: hidden; is an option as well. –  Kip Aug 19 '09 at 14:51
1  
@Kip: Both of those solutions have problems. word-wrap: break-word isn't supported by all browsers (FF3.0, Chrome, Opera, about a third of the market altogether). And overflow: hidden would make some content completely invisible. So yes, there are other options, but all options have their drawbacks. Whether these solutions are "good" is subjective. That said, though, I agree with you. In my opinion, using break-word is better than nothing, even though it results in inconsistencies across browsers. –  ベレアー アダム Sep 3 '09 at 16:22
1  
@Adam Bellaire: but it is a solution to over 60% of SOFU visitors! –  perbert Sep 3 '09 at 17:02
4  
blog.stackoverflow.com/2009/08/… Even if IE doesn't play along, at least it would be a better experience for some users, instead of it looking bad to all users. –  perbert Sep 3 '09 at 17:03
    
overflow:auto instead of overflow:hidden doesn't lose you any content, if that's what the designers are worried about.. –  D_N Mar 4 '10 at 1:22
    
see my answer. This is tough because comments are elastic in size, and all the cleverness around overflow doesn't work when the container does not have a fixed size. Sadly. But, the good news is that I can edit comments now so I just manually inserted a bunch of spaces. –  Jeff Atwood Mar 18 '10 at 10:58
add comment

Adding the CSS rule:

.post-text { overflow: hidden; }

Appears to fix it up nicely.

share|improve this answer
add comment

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

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

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

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.

share|improve this answer
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.) –  D_N Mar 4 '10 at 10:41
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
add comment

Whatisanyonetryingtolegitimatelycommunicatewithalongunbrokenstringofsufficientlengthtooverflowtheelement?alsoacodetagdoesn'thavetohavecodeinitsointhelegitimatecaseusethat.

share|improve this answer
15  
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... –  HollyStyles Jul 15 '09 at 8:05
    
Actually Thai does have spaces, used like full stops in english so there will be less of them in a typical text. –  HollyStyles 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! –  David Locke Jul 16 '09 at 20:35
    
Cut'n'Paste into notepad –  HollyStyles 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
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
add comment

You must log in to answer this question.

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