别让 <code> 标签中的代码换行

Preventing line breaks in <code> elements

我网站的一个小细节是自动插入不换行空格,防止像“5 cm”或“Objective-C”这样的短语被强行换行。以往我只在正文中应用这一技巧,但最近发现 `<code>` 标签里的代码片段也常出现尴尬的换行,比如正则表达式 `(?-u:…)` 被拆成两行,或者 `--multiline` 标志被截断。浏览器在连字符处换行对普通文本没问题,但在代码中却严重影响阅读。直接替换为不换行连字符会破坏代码的可复制性,于是我写了一个脚本:检测短小的 `<code>` 元素,若包含连字符或空格,就自动添加 `nowrap` CSS 类,配合 `text-wrap: nowrap` 属性禁止换行。这个改动虽小,却显著提升了代码片段的阅读体验。

这些换行让文章更难阅读,却没有任何好处。
  1. danlitt

    你无法用正则表达式解析 [X]HTML。因为 HTML 根本无法被正则表达式解析。正则表达式不是用来正确解析 HTML 的工具。

  2. pwdisswordfishq

    何必还要搞 CSS 类名?直接把 text-wrap: nowrap; 应用到所有 <code> 元素上,省掉那些脆弱的正则解析不就行了。

  3. pimlottc

    不幸的是,这让窄屏设备(比如手机)上的阅读体验变得更糟,用户不得不横向滚动。

同日更多故事

2026-07-24