CSS writing-mode对部分字符无效，符号'№'未旋转问题咨询

嘿，别担心，这不是你的操作出错啦！这个问题其实是由№这个特殊字符的排版特性导致的～

问题原因 #

№是Unicode中的有序编号符号（Number Sign），它的设计初衷是和数字搭配使用，用来表示“编号”。很多浏览器在处理垂直排版（writing-mode: vertical-lr）时，会默认让这类功能性符号保持水平方向，目的是让它和后面的数字保持视觉上的关联，避免排版混乱。而普通文本字符会按照垂直排版规则自动旋转，所以就出现了只有№没变化的情况。

解决方案 #

这里给你几个实用的解决办法：

• 用CSS transform强制旋转：给№单独添加样式，通过transform: rotate(180deg)强制让它和其他字符保持一致的方向，注意要设置display: inline-block确保transform生效。修改后的示例代码如下：

<html>
<head></head>
<body>
  <p style="writing-mode: vertical-lr;"> Номер <span style="transform: rotate(180deg); display: inline-block;">№</span> 2 </p>
</body>
</html>

• 替换字符（如果允许的话）：如果对符号样式要求不严格，可以用其他方式替代№，比如用N°或者直接写“编号2”，这样就能避免特殊字符的排版问题。

• 更换字体：部分字体对特殊符号的垂直排版支持更完善，比如Noto Sans这类开源无衬线字体，你可以尝试给元素设置font-family: 'Noto Sans', sans-serif，看看是否能自动让№跟随垂直排版旋转。

补充说明 #

不同浏览器对特殊字符的排版处理可能略有差异，但transform强制旋转的方法是目前兼容性最好的通用解决方案哦～

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