如何用HTML/CSS避免特定字符间换行？以维基百科脚注为例

维基百科能让句号和脚注上标<sup>不被换行拆分，主要靠两个核心CSS特性和浏览器默认排版逻辑的结合：

• <sup>标签的针对性样式：维基百科给<sup>设置了line-height: 0、相对定位的垂直对齐（position: relative; top: -0.5em），让上标元素和前面的句号在排版流中形成紧密绑定的视觉与逻辑单元，浏览器会优先选择其他位置换行，而非在两者之间拆分。
• 全局文本排版规则：维基百科在全局容器（如<body>、<p>）上设置了overflow-wrap: break-word（替代旧版word-wrap: break-word）和word-break: normal。这组规则让浏览器优先在单词间隙换行，仅当单个单词超出容器宽度时才会拆分单词，不会轻易拆分标点与紧随的内联元素组合。

另外，浏览器本身的默认换行逻辑也会尽量避免在标点符号和紧随的非空格内容之间换行，维基百科的样式进一步强化了这个行为，同时脚注结构中句号与<sup>之间没有空格，也让浏览器将其视为连续内容，不会随意拆分。

内容的提问来源于stack exchange，提问作者David Lee