18

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):

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

  • 9
    Woah... +1 for totally breaking the site. Looks like we need an overflow: hidden; somewhere. – uɐɯsO uɐɥʇɐN Feb 14 '12 at 2:37
  • 1
    The images behave fine on the mobile site but the *** do not – Resorath Feb 14 '12 at 2:40
  • 2
    This isn't new – Alex Coplan Feb 14 '12 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... :) – Tamara Wijsman Feb 14 '12 at 2:48
6

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');
  • +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? – Tamara Wijsman Apr 23 '12 at 9:20
  • @TomWijsman Added a fix for the nested quotes problem. – Mathias Bynens Apr 23 '12 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 '12 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).

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

You must log in to answer this question.

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