在我这个网站中，我最喜欢的小细节之一就是非断行空格。我有代码可以搜索类似 "5 cm"、"New York" 或 "Objective-C" 的短语，并插入非断行空格/连字符，使它们不会被拆分到多行。这是一个排版细节，如果我在编写一本固定布局的印刷书籍时将会由专业排版师处理，但网站的工作原理并非如此。我的网站在不同的尺寸下被查看，浏览器选择在哪里插入换行。我添加这些非断行字符是为了让浏览器知道避免尴尬的换行。之前我只将这个细节应用于正文，但今天我为 <code> 元素实现了类似的功能。在我上一篇文章中使用了很多行内代码片段，在审查时我注意到其中几个片段有不便的换行。例如， (?-u:…) 被拆分成了 (?- 和 u:…) ，而标志 --multiline 则是被拆分为一行的 - 和另一行的 -multiline。这些换行使文章更难阅读，而没有任何好处。我能理解它们为什么会发生——浏览器寻找可以换行的字符，而在英语中，这包括连字符。通常情况下，拆分连字符词语到多行是可以的，但在代码中发生这种情况是令人烦恼的。我可以通过将 <code> 中的连字符替换为非断行连字符来解决这个问题，但人们复制/粘贴代码片段，这可能会改变其含义。因此，我编写了一个检查，寻找较短并包含换行字符的 <code> 元素，然后添加 nowrap CSS 类。 import re def add_nowrap ( match : re . Match [ str ]) -> str : """ 如果 <code> 元素包含换行字符，则添加 `nowrap` 类。 """ contents = match . group ( "contents" ) if "-" in contents or " " in contents : return f "<code class= \" nowrap \" > { contents } </code>" return match . group ( 0 ) text : str # 将 `nowrap` 类添加到包含换行字符的短 <code> 片段。 # # 15 个字符的限制是任意的。在较长的代码片段中， # 包裹是更可取的，以避免在上一行留下过多的空白。 text = re . sub ( r "<code>(?P<contents>[^<]{1,15})</code>" , add_nowrap , text ) 这与一个 CSS 规则配对，该规则使用 text-wrap 属性告诉浏览器不要跨行换行： code .nowrap { text-wrap : nowrap ; } 这并不是必须的，但我觉得这使得网站略显更好。