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