下面的CSS..
.message {
writing-mode: vertical-rl;
text-orientation: upright;
font-size: 2rem;
}<display class='message'>ㄨㄢˊㄇㄢˇ</display>..产生此输出，请注意字符ˊ下面的空格：
有没有一个CSS可以根据字符的高度来显示单个字符，这样标点符号（例如句号和逗号）和重音字符就不会占用空间。上面的单词需要显示为：
上面的方法将用于CSS伪元素，因此，将每个字符 Package 在它们自己的div或span中是不可行的
此处显示问题详细信息：https://github.com/chinese-words-separator/chinese-words-separator.github.io/issues/10#issuecomment-1457266661
编辑
关于尝试不同字体的问题
我试了几种字体，它们都能显示重音字符（例如ˊ），但在重音字符下面有空格。
以下是我尝试过的所有字体：
编辑
对于建议嵌入额外div/span的答案，我需要强调的是，在我的特定用例中，div/span（任何HTML标记）不能嵌入到CSS伪元素中
至于使用CSS伪元素作为注解机制的基本原理（而不是说使用ruby或div和span的组合），CSS伪元素是唯一的方式来注解文本，Chrome扩展不会干扰浏览器的复制粘贴（即Ctrl+C）功能和第三方Chrome扩展字典的功能。ruby标签不是选项，即使它可以嵌入HTML，ruby对浏览器的复制粘贴和其他字典的干扰太大
使用span和div进行注解时，在突出显示和复制原始文本时也会复制其内容
尝试复制下面链接中的原始文本，如果注解机制使用ruby和/或div/span等技术，则这些标记的内容也将被复制：
https://www.w3schools.com/code/tryit.asp?filename=G08ZZXDZJ7MX
使用CSS伪元素注解文本是Chrome扩展不干扰浏览器复制粘贴功能的唯一选择，也是它不干扰其他第三方Chrome扩展的唯一选择
以下是CSS伪元素如何在代码（Chrome扩展）中用作注解器：https://github.com/chinese-words-separator/chinese-words-separator.github.io/issues/9#issuecomment-1452879797
3条答案
按热度按时间zujrkrfu1#
据我所知，目前还没有CSS属性可以根据单个字符的具体大小或形状自动调整其高度，不过可以尝试通过调整line-height属性来达到想要的效果，这会影响文本行与行之间的间距，但也可能影响单个字符之间的间距。
或者，您可以尝试使用专门为竖排文本设计的字体，如包含竖排标志符号的繁体中文字体。这些字体可能更好地支持可变字符高度，并可能解决您遇到的重音字符占用空间的问题。
如果这两种解决方案都不适合您，您可能需要考虑将每个单独的字符 Package 在其自己的元素（如范围）中，并将自定义样式应用于每个元素以达到所需的效果。虽然这在您的特定用例中可能不可行，但它可能是实现所需的精确样式的最可靠方法。
6za6bjd02#
我可以通过手动指定需要调整的字符来向您提供类似这样的建议：
4smxwvx53#