163

Currently, the SE system inserts invisible characters (U+200C and U+200B) into text in comments if there's a "word" longer than 60 characters long, to force a break to preserve the layout. This is by design; but:

  1. See here for the trouble it causes in regard to code in comments, and

  2. It doesn't work, because it works by character count, not width:

/* This is the EXISTING wrapper div that gives the comments
   section its width
*/
div.comments {
  width: 660px;
  border: 1px solid #ddd;  /* Added for clarity */
}
div.comments table {
  width: 100%;
}
This is how wide the comments should be:
<div class="comments">
  <table>
    <tbody>
      <tr id="comment-162534" class="comment ">
        <td class="comment-actions">
          <table><tbody>
            <tr>
              <td class=" comment-score"><span title="number of 'useful comment' votes received" class="cool">1</span></td>
              <td><a class="comment-up comment-up-off" title="this comment adds something useful to the post">&nbsp;</a></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td><a class="comment-flag" title="Flag this comment for serious problems or moderator attention">&nbsp;</a></td>
            </tr>
          </tbody></table>
        </td>
        <td class="comment-text">
          <div style="display: block;" class="comment-body">
            <span class="comment-copy">Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</span> –&nbsp;
            <a href="/users/1234567/joe-bloggs" title="1,234 reputation" class="comment-user">Joe Bloggs</a>
            <span class="comment-date" dir="ltr"><a class="comment-link" href="#comment162534_987654"><span title="2017-05-01 08:25:54Z" class="relativetime-clean">2 hours ago</span></a>
            </span>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
This is how wide they are if you use `W` 60 times and it inserts the invisible characters after 60 chars:
<div class="comments">
  <table>
    <tbody>
      <tr id="comment-162534" class="comment ">
        <td class="comment-actions">
          <table><tbody>
            <tr>
              <td class=" comment-score"><span title="number of 'useful comment' votes received" class="cool">1</span></td>
              <td><a class="comment-up comment-up-off" title="this comment adds something useful to the post">&nbsp;</a></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td><a class="comment-flag" title="Flag this comment for serious problems or moderator attention">&nbsp;</a></td>
            </tr>
          </tbody></table>
        </td>
        <td class="comment-text">
          <div style="display: block;" class="comment-body">
            <span class="comment-copy">Sed ut perspiciatis: WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW‌​WWWWWWWWWW</span> –&nbsp;
            <a href="/users/1234567/joe-bloggs" title="1,234 reputation" class="comment-user">Joe Bloggs</a>
            <span class="comment-date" dir="ltr"><a class="comment-link" href="#comment162534_987654"><span title="2017-05-01 08:25:54Z" class="relativetime-clean">2 hours ago</span></a>
            </span>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

(Nice catch, Niet the Dark Absol)

I suggest that rather than inserting bug-producing hidden characters, we apply a class to the element containing the over-long word (the code element if it's a code run, or a span we add for non-code over-long words), with this styling:

.too-long {
    word-break: break-all;
    display: inline-block;
    width: 620px;
}

…where the 620px is derived from the existing rule applying width: 660px on the div.comments wrapper div. So if that rule changes, we change this one as well.

On browsers other than Firefox, it could just have the word-break: break-all, but sadly Firefox doesn't handle that unless the element has a width fairly directly applied to it. :-(

Doing that, instead of:

/* This is the EXISTING wrapper div that gives the comments
   section its width
*/

div.comments {
  width: 660px;
  border: 1px solid #ddd;
  /* Added for clarity */
}

div.comments table {
  width: 100%;
}
<div class="comments">
  <table>
    <tbody>
      <tr id="comment-123456" class="comment ">
        <td class="comment-actions">
          <table><tbody>
            <tr>
              <td class=" comment-score"><span title="number of 'useful comment' votes received" class="cool">1</span></td>
              <td><a class="comment-up comment-up-off" title="this comment adds something useful to the post">&nbsp;</a></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td><a class="comment-flag" title="Flag this comment for serious problems or moderator attention">&nbsp;</a></td>
            </tr>
          </tbody></table>
        </td>
        <td class="comment-text">
          <div style="display: block;" class="comment-body">
            <span class="comment-copy">Sed ut perspiciatis: <code>012345678901234567890123456789012345678901234567890123456789‌​01234567890123456789</code></span> –&nbsp;
            <a href="/users/1234567/joe-bloggs" title="1,234 reputation" class="comment-user">Joe Bloggs</a>
            <span class="comment-date" dir="ltr"><a class="comment-link" href="#comment123456_987654"><span title="2017-05-01 08:25:54Z" class="relativetime-clean">2 hours ago</span></a>
            </span>
          </div>
        </td>
      </tr>
      <tr id="comment-654321" class="comment ">
        <td class="comment-actions">
          <table><tbody>
            <tr>
              <td class=" comment-score"><span title="number of 'useful comment' votes received" class="cool">1</span></td>
              <td><a class="comment-up comment-up-off" title="this comment adds something useful to the post">&nbsp;</a></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td><a class="comment-flag" title="Flag this comment for serious problems or moderator attention">&nbsp;</a></td>
            </tr>
          </tbody></table>
        </td>
        <td class="comment-text">
          <div style="display: block;" class="comment-body">
            <span class="comment-copy">Sed ut perspiciatis: aaaaaaaaaabbbbbbbbbbccccccccccddddddddddeeeeeeeeeeffffffffff‌​gggggggggghhhhhhhhhh</span> –&nbsp;
            <a href="/users/1234567/joe-bloggs" title="1,234 reputation" class="comment-user">Joe Bloggs</a>
            <span class="comment-date" dir="ltr"><a class="comment-link" href="#comment654321_987654"><span title="2017-05-01 08:25:54Z" class="relativetime-clean">2 hours ago</span></a>
            </span>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

We'd have:

/* This is the EXISTING wrapper div that gives the comments
   section its width
*/
div.comments {
  width: 660px;
  border: 1px solid #ddd;  /* Added for clarity */
}
div.comments table {
  width: 100%;
}

/* The new class, added where necessary */
.too-long {
  word-break: break-all;
  display: inline-block;
  width: 620px;
}
<div class="comments">
  <table>
    <tbody>
      <tr id="comment-123456" class="comment ">
        <td class="comment-actions">
          <table><tbody>
            <tr>
              <td class=" comment-score"><span title="number of 'useful comment' votes received" class="cool">1</span></td>
              <td><a class="comment-up comment-up-off" title="this comment adds something useful to the post">&nbsp;</a></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td><a class="comment-flag" title="Flag this comment for serious problems or moderator attention">&nbsp;</a></td>
            </tr>
          </tbody></table>
        </td>
        <td class="comment-text">
          <div style="display: block;" class="comment-body">
            <span class="comment-copy">Sed ut perspiciatis: <code class="too-long">01234567890123456789012345678901234567890123456789012345678901234567890123456789</code></span> –&nbsp;
            <a href="/users/1234567/joe-bloggs" title="1,234 reputation" class="comment-user">Joe Bloggs</a>
            <span class="comment-date" dir="ltr"><a class="comment-link" href="#comment123456_987654"><span title="2017-05-01 08:25:54Z" class="relativetime-clean">2 hours ago</span></a>
            </span>
          </div>
        </td>
      </tr>
      <tr id="comment-654321" class="comment ">
        <td class="comment-actions">
          <table><tbody>
            <tr>
              <td class=" comment-score"><span title="number of 'useful comment' votes received" class="cool">1</span></td>
              <td><a class="comment-up comment-up-off" title="this comment adds something useful to the post">&nbsp;</a></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td><a class="comment-flag" title="Flag this comment for serious problems or moderator attention">&nbsp;</a></td>
            </tr>
          </tbody></table>
        </td>
        <td class="comment-text">
          <div style="display: block;" class="comment-body">
            <span class="comment-copy">Sed ut perspiciatis: <span class="too-long">aaaaaaaaaabbbbbbbbbbccccccccccddddddddddeeeeeeeeeeffffffffffgggggggggghhhhhhhhhh</span></span> –&nbsp;
            <a href="/users/1234567/joe-bloggs" title="1,234 reputation" class="comment-user">Joe Bloggs</a>
            <span class="comment-date" dir="ltr"><a class="comment-link" href="#comment654321_987654"><span title="2017-05-01 08:25:54Z" class="relativetime-clean">2 hours ago</span></a>
            </span>
          </div>
        </td>
      </tr>
      <tr id="comment-162534" class="comment ">
        <td class="comment-actions">
          <table><tbody>
            <tr>
              <td class=" comment-score"><span title="number of 'useful comment' votes received" class="cool">1</span></td>
              <td><a class="comment-up comment-up-off" title="this comment adds something useful to the post">&nbsp;</a></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td><a class="comment-flag" title="Flag this comment for serious problems or moderator attention">&nbsp;</a></td>
            </tr>
          </tbody></table>
        </td>
        <td class="comment-text">
          <div style="display: block;" class="comment-body">
            <span class="comment-copy">Sed ut perspiciatis: <span class="too-long">WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW</span></span> –&nbsp;
            <a href="/users/1234567/joe-bloggs" title="1,234 reputation" class="comment-user">Joe Bloggs</a>
            <span class="comment-date" dir="ltr"><a class="comment-link" href="#comment162534_987654"><span title="2017-05-01 08:25:54Z" class="relativetime-clean">2 hours ago</span></a>
            </span>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

…which in addition to not inserting invisible characters, works correctly with a lot of wide characters like W.

If we wanted to special-case Firefox, it could be like this for other browsers:

/* This is the EXISTING wrapper div that gives the comments
   section its width
*/
div.comments {
  width: 660px;
  border: 1px solid #ddd;  /* Added for clarity */
}
div.comments table {
  width: 100%;
}

/* The new class, added where necessary */
.too-long {
  word-break: break-all;
}
<strong>Doesn't work on Firefox</strong>
<div class="comments">
  <table>
    <tbody>
      <tr id="comment-123456" class="comment ">
        <td class="comment-actions">
          <table><tbody>
            <tr>
              <td class=" comment-score"><span title="number of 'useful comment' votes received" class="cool">1</span></td>
              <td><a class="comment-up comment-up-off" title="this comment adds something useful to the post">&nbsp;</a></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td><a class="comment-flag" title="Flag this comment for serious problems or moderator attention">&nbsp;</a></td>
            </tr>
          </tbody></table>
        </td>
        <td class="comment-text">
          <div style="display: block;" class="comment-body">
            <span class="comment-copy">Sed ut perspiciatis: <code class="too-long">01234567890123456789012345678901234567890123456789012345678901234567890123456789</code></span> –&nbsp;
            <a href="/users/1234567/joe-bloggs" title="1,234 reputation" class="comment-user">Joe Bloggs</a>
            <span class="comment-date" dir="ltr"><a class="comment-link" href="#comment123456_987654"><span title="2017-05-01 08:25:54Z" class="relativetime-clean">2 hours ago</span></a>
            </span>
          </div>
        </td>
      </tr>
      <tr id="comment-654321" class="comment ">
        <td class="comment-actions">
          <table><tbody>
            <tr>
              <td class=" comment-score"><span title="number of 'useful comment' votes received" class="cool">1</span></td>
              <td><a class="comment-up comment-up-off" title="this comment adds something useful to the post">&nbsp;</a></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td><a class="comment-flag" title="Flag this comment for serious problems or moderator attention">&nbsp;</a></td>
            </tr>
          </tbody></table>
        </td>
        <td class="comment-text">
          <div style="display: block;" class="comment-body">
            <span class="comment-copy">Sed ut perspiciatis: <span class="too-long">aaaaaaaaaabbbbbbbbbbccccccccccddddddddddeeeeeeeeeeffffffffffgggggggggghhhhhhhhhh</span></span> –&nbsp;
            <a href="/users/1234567/joe-bloggs" title="1,234 reputation" class="comment-user">Joe Bloggs</a>
            <span class="comment-date" dir="ltr"><a class="comment-link" href="#comment654321_987654"><span title="2017-05-01 08:25:54Z" class="relativetime-clean">2 hours ago</span></a>
            </span>
          </div>
        </td>
      </tr>
      <tr id="comment-162534" class="comment ">
        <td class="comment-actions">
          <table><tbody>
            <tr>
              <td class=" comment-score"><span title="number of 'useful comment' votes received" class="cool">1</span></td>
              <td><a class="comment-up comment-up-off" title="this comment adds something useful to the post">&nbsp;</a></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td><a class="comment-flag" title="Flag this comment for serious problems or moderator attention">&nbsp;</a></td>
            </tr>
          </tbody></table>
        </td>
        <td class="comment-text">
          <div style="display: block;" class="comment-body">
            <span class="comment-copy">Sed ut perspiciatis: <span class="too-long">WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW</span></span> –&nbsp;
            <a href="/users/1234567/joe-bloggs" title="1,234 reputation" class="comment-user">Joe Bloggs</a>
            <span class="comment-date" dir="ltr"><a class="comment-link" href="#comment162534_987654"><span title="2017-05-01 08:25:54Z" class="relativetime-clean">2 hours ago</span></a>
            </span>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Another option is to use word-wrap: break-word instead, but that always needs the display: inline-block and explicit width, even on Chrome, whereas with word-break: break-all we don't need those except on Firefox.

  • 4
    should code ever be in comments? I mean, how would you even format anything hut a single line ? – Journeyman Geek May 1 '17 at 13:21
  • 4
    @JourneymanGeek: Rarely, it can be appropriate, usually in the context of suggesting an improvement to an answer that may go far enough that it would violate the original author's intent if you just made the change. – T.J. Crowder May 1 '17 at 13:23
  • 3
    I sometimes use code in comments, and find it very useful. – RobAu May 1 '17 at 13:53
  • 15
    @JourneymanGeek: "should code ever be in comments?" – Comments are often used to ask clarifying questions to the OP of a question. Considering that (at least on Stack Overflow) a significant amount of questions are about code, it seems reasonable to assume that at least some clarifications also concern code. "I mean, how would you even format anything hut a single line?" – Depending on the language, a single line can be enough. For example, in Ruby, linebreaks are never required; any Ruby program, no matter how complex, can be written in a single line. – Jörg W Mittag May 1 '17 at 14:39
  • 1
    @JörgWMittag You can write most programming languages in a single line. But just because it’s valid, that doesn’t mean that it’s a good idea or that putting code inside comments is a good idea. – poke May 1 '17 at 15:12
  • 9
    Even if there was no CSS solution, it would be better to reject the comment, or introduce a space instead of invisible crap, or do almost anything other than silently and invisibly sabotage people's code. – user2357112 May 1 '17 at 17:48
  • 38
    Even worse than the constant "by-design" claim, is the fact that it doesn't even solve the problem it was designed to solve. See: WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW - a simple word-wrap:break-word will resolve this better than word-break:break-all, because the latter will break words whenever it can, whereas the former will only break them if necessary. – Niet the Dark Absol May 1 '17 at 18:00
  • 1
    @NiettheDarkAbsol: Excellent point, added above. – T.J. Crowder May 1 '17 at 18:15
  • 30
    I wasn't convinced, until this, which is not un-amusing. – Jason C May 1 '17 at 18:23
  • 2
    @T.J.Crowder I still think word-wrap:break-word would be a more appropriate choice, as demonstrated here – Niet the Dark Absol May 2 '17 at 9:57
  • 2
    @JasonC I thought it was just me for a second there! – TheLethalCoder May 2 '17 at 10:50
  • 2
    I've been noticing this on code golf for a while now where full solutions with improvements are commonly posted as comments so that you can copy and paste them in and when trying to compile/run it getting all sorts of errors... – TheLethalCoder May 2 '17 at 11:00
  • 2
    @T.J.Crowder On the current page, I have added .comments>table{table-layout:fixed} .comment-body{word-wrap:break-word} - just these two rules fixes all the layout issues caused by my W-spam earlier. Because this should apply to entire comments, not just code within them. – Niet the Dark Absol May 2 '17 at 11:50
  • 1
    @T.J.Crowder For some reason, the comment action "column" is defined as being 15px wide, but the score and icons are clearly bigger than that. So that's why table-layout:fixed breaks those... I suppose they will simply need a bigger space defined, one that actually fits the content. – Niet the Dark Absol May 2 '17 at 17:06
  • 4
    @NiettheDarkAbsol: In any case, I think we've done our part demonstrating that a CSS solution is feasible and desireable. – T.J. Crowder May 2 '17 at 17:11
7
+25

I really do think that this should be applied. I don't see any disadvantage whatsoever to use something else such as word-warp to solve the problem.

Plus, once this fixed, we will no longer have questions asking why code copied from comments doesn't work.

But people shouldn't put code into comments, they should post it as an answer.

Although that may be true, why not let code in comments be uncorrupted?

But that would mean work for developers!

Isn't that what meta is for, bugging requesting things from developers?

You must log in to answer this question.

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