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:
See here for the trouble it causes in regard to code in comments, and
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"> </a></td>
</tr>
<tr>
<td> </td>
<td><a class="comment-flag" title="Flag this comment for serious problems or moderator attention"> </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> –
<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"> </a></td>
</tr>
<tr>
<td> </td>
<td><a class="comment-flag" title="Flag this comment for serious problems or moderator attention"> </a></td>
</tr>
</tbody></table>
</td>
<td class="comment-text">
<div style="display: block;" class="comment-body">
<span class="comment-copy">Sed ut perspiciatis: WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW</span> –
<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"> </a></td>
</tr>
<tr>
<td> </td>
<td><a class="comment-flag" title="Flag this comment for serious problems or moderator attention"> </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>01234567890123456789012345678901234567890123456789012345678901234567890123456789</code></span> –
<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"> </a></td>
</tr>
<tr>
<td> </td>
<td><a class="comment-flag" title="Flag this comment for serious problems or moderator attention"> </a></td>
</tr>
</tbody></table>
</td>
<td class="comment-text">
<div style="display: block;" class="comment-body">
<span class="comment-copy">Sed ut perspiciatis: aaaaaaaaaabbbbbbbbbbccccccccccddddddddddeeeeeeeeeeffffffffffgggggggggghhhhhhhhhh</span> –
<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"> </a></td>
</tr>
<tr>
<td> </td>
<td><a class="comment-flag" title="Flag this comment for serious problems or moderator attention"> </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> –
<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"> </a></td>
</tr>
<tr>
<td> </td>
<td><a class="comment-flag" title="Flag this comment for serious problems or moderator attention"> </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> –
<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"> </a></td>
</tr>
<tr>
<td> </td>
<td><a class="comment-flag" title="Flag this comment for serious problems or moderator attention"> </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> –
<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"> </a></td>
</tr>
<tr>
<td> </td>
<td><a class="comment-flag" title="Flag this comment for serious problems or moderator attention"> </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> –
<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"> </a></td>
</tr>
<tr>
<td> </td>
<td><a class="comment-flag" title="Flag this comment for serious problems or moderator attention"> </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> –
<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"> </a></td>
</tr>
<tr>
<td> </td>
<td><a class="comment-flag" title="Flag this comment for serious problems or moderator attention"> </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> –
<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.
word-wrap:break-wordwill resolve this better thanword-break:break-all, because the latter will break words whenever it can, whereas the former will only break them if necessary.word-wrap:break-wordwould be a more appropriate choice, as demonstrated here.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.