当前，如果“单词”的长度超过60个字符，则SE系统会在注释文本中插入不可见的字符（U + 200C和U + 200B），以强制中断以保留布局。这是设计使然；但是：


请参阅此处，了解它对注释中的代码造成的麻烦，并且
不起作用，因为它按字符计数而不是宽度起作用：




 /* 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>





（妙招，暗黑绝对伏特加尼峰）

我建议不要将产生错误的隐藏字符插入，而是将一个类应用于包含超长字（如果是代码运行，则为code元素，或者我们为非代码超长字添加span），其样式如下：

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


…其中620像素是从在width: 660px包装器div上应用div.comments的现有规则得出的。因此，如果该规则更改了，我们也将更改此规则。

在Firefox以外的浏览器上，它可能只有word-break: break-all，但遗憾的是，除非元素具有相当宽的宽度，否则Firefox无法处理该问题。适用于它。 :-(

这样做，而不是：




 /* 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>





我们有：




 /* 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>





...除了不插入不可见的字符外，它还可以与W之类的宽字符一起正常使用。

如果我们要特制Firefox，对于其他浏览器可能是这样的：




 /* 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>





另一种选择是改用word-wrap: break-word，但即使在Chrome上，也始终需要display: inline-block和显式宽度，而对于word-break: break-all，我们不需要这些，而在Firefox上则不需要。

评论

代码中是否应该包含注释？我的意思是，您如何格式化单行格式的任何内容？
@JourneymanGeek：很少，这通常是适当的，通常是在建议对答案进行改进的情况下，如果您做出了更改，那么可能会远远超出原始作者的意图。
我有时在注释中使用代码，并发现它非常有用。
@JourneymanGeek：“代码是否应该在注释中？” –注释通常用于向问题的操作者提出澄清问题。考虑到（至少在堆栈溢出方面）有很多关于代码的问题，因此可以合理地假设至少有一些说明也与代码有关。 “我的意思是，您什至不格式化任何格式的一行？” –根据语言，一行就足够了。例如，在Ruby中，不需要换行符；任何Ruby程序，无论多么复杂，都可以在一行中编写。
@JörgWMittag您可以在一行中编写大多数编程语言。但是，仅仅因为它是有效的，并不意味着它是一个好主意，也不意味着将代码放入注释中是个好主意。
即使没有CSS解决方案，也最好拒绝评论，或者引入空格而不是看不见的废话，或者除了默默无闻地破坏人们的代码外，几乎可以做任何其他事情。
比它一贯的“按设计”主张更糟糕的是，它甚至不能解决其设计要解决的问题。请参阅：WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW-简单的word-wrap：break-word会比word-break：break-all更好地解决此问题，因为后者会在可能的情况下打破单词，而前者只会在必要时打破它们。
直到这之前，我一直没有被说服，这并不是没有意思。
@ T.J。Crowder我仍然认为自动换行：断字是更合适的选择，如此处所示
@JasonC我以为那只是我一秒钟！
我已经在代码高尔夫上注意到了一段时间，通常将带有改进的完整解决方案作为注释发布，以便您可以将其复制并粘贴到其中，并且在尝试编译/运行它时会遇到各种错误...
@TJCrowder在当前页面上，我添加了.comments> table {table-layout：fixed} .comment-body {word-wrap：break-word}-仅这两个规则解决了由W-引起的所有布局问题垃圾邮件较早。因为这应该适用于整个注释，而不仅仅是其中的代码。
@NiettheDarkAbsol：无论如何，我认为我们已经尽力表明CSS解决方案是可行且可取的。
我意识到这是一个功能请求，而dupe是一个错误，但是该错误修复隐式地回答了FR，因此我将两者链接在一起。
@MonicaCellio从技术上讲，在此发布之时，该错误报告已被标记为“按设计”，因此这是更改设计的功能要求。是的由于开发人员选择在此处更改标签而不是在此处更新标签，因此可以将其标记为重复。

#1 楼

我确实确实认为应该这样做。我看不到使用任何其他方法（例如，词条变形）来解决问题的任何缺点。

此外，一旦修复，我们将不再有疑问，为什么从注释中复制的代码不起作用。


但是人们不应该放置代码


尽管这可能是正确的，但为什么不让注释中的代码不受破坏呢？


但这对开发人员来说意味着工作！


这不是元数据的目的吗，窃听开发人员的要求吗？

#2 楼

根据balpha的回答，该状态现在应该已完成：


大约一个月前，不再插入这些字符，因为注释不再与一个<table>（而表布局算法可以防止以任何其他方式解决溢出问题。）


评论

当然看起来像。 （我认为这应该是评论，而不是答案。）

– T.J.拥挤者
19年5月26日17:00
@ T.J。Crowder不，这种回答是完全可以接受的。

–好奇号刺猬索尼克
19年5月26日在17:30
@SonictheInclusiveHedgehog-引文？

– T.J.拥挤者
19年5月26日在17:33
@ T.J。Crowder我本人已经发布了几个这样的答案，并且它们始终被投票赞成，而不是被删除为NAA。

–好奇号刺猬索尼克
19年5月26日在17:34
@SonictheInclusiveHedgehog-因此，您是根据轶事证据而不是引文工作。好的，您在MSE方面的经验比我多得多。

– T.J.拥挤者
19年5月26日在17:39