24

Here is an example (2 image / 2 kbd):

Here is another example (2 images / 1 kbd):

Here is yet another example (A lot of stars in a kbd):

**************************************************************************************************************************************************************************************************************************************************************************************************************

4
  • 10
    Woah... +1 for totally breaking the site. Looks like we need an overflow: hidden; somewhere. Feb 14, 2012 at 2:37
  • 1
    The images behave fine on the mobile site but the *** do not
    – Resorath
    Feb 14, 2012 at 2:40
  • 2
    This isn't new Feb 14, 2012 at 2:40
  • @AlexCoplan: It's actually older than that, but somehow decided to remove my questions on this bug. The same happens with a lot of ` > ` characters on one line... :) Feb 14, 2012 at 2:48

2 Answers 2

7

Here’s a better solution:

pre, code, kbd, var, samp {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

It will make code spans and similar elements automatically wrap to the next line when needed, in all browsers.

Here’s a jsFiddle demonstrating this snippet for an inline <code> span: http://jsfiddle.net/VT6Uu/

This should also fix the >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> problem in comments.

Yo dawg, here are some quotes within quotes:

test

This can be fixed by setting the blockquote padding to zero when it’s wrapped in too many blockquote elements:

blockquote blockquote blockquote blockquote {
  padding: 0;
}

In this case, you would be able to visually nest up to three quotes.

To quickly test the above snippets on this page, enter this in your console:

$('<style>pre,code,kbd,var,samp{white-space:pre;white-space:pre-wrap;word-wrap:break-word}blockquote blockquote blockquote blockquote{padding:0}</style>').appendTo('head');
3
  • +1 But doesn't work for comments. Also doesn't work many nested quotes in a post. Perhaps you need to add a selector for the comment and for the blockquote? Apr 23, 2012 at 9:20
  • @TomWijsman Added a fix for the nested quotes problem. Apr 23, 2012 at 9:44
  • 1
    @MathiasBynens For comments, you can apply word-wrap to the <div> wrapping the comment. See my suggestion here: meta.stackexchange.com/a/131533/172108
    – iglvzx
    May 5, 2012 at 22:44
4

Okay, I have researched a possible solution using CSS:

.post-text p {
    overflow: hidden;
}

That completely solves this issue (and any other "it overflows the post" problems).

4
  • 3
    type $('.post-text p').css({overflow:'hidden'}); in console to test :) Feb 14, 2012 at 2:46
  • Or javascript:$('.post-text p').css({overflow:'hidden'}); in the address bar. :) Feb 14, 2012 at 2:50
  • 7
    @GeorgeEdison: What about the >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> bug in comments/posts? Feb 14, 2012 at 2:52
  • 1
    >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Whats the bug exactly (in comments)?
    – asheeshr
    Sep 21, 2013 at 7:08

You must log in to answer this question.

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