考虑字符大小差异

Question

所以，假设我必须用字符填充下面的空间（一定宽度）：
-----------------------
AAAAAAAAAAA（当这些字符都是大写字母时，11个字符覆盖它） -----------------------
aaaaaaaaaaaaa（当它们小写时，13个字符覆盖它）

有什么方法可以解释这些差异并相应地调整HTML的宽度？ （所以我的程序会从句子中读取字符和结果“宽度”）

问题在于使用了哪些字符，用户可以输入从简单字母到数字和特殊字符的所有内容，这个问题是否有明确的已知解决方案？

编辑：
（使用等宽字体不是一种选择）

Answer 1

警告，仅适用于Firefox，发布时间：

https://caniuse.com/#feat=css-text-justify

如果您不能使用等宽字体，那么您可以尝试在容器text-align: justify;上使用CSS text-align-last: justify;，text-justify: inter-character;和<div>来调整间距在小写字母a之间，使其宽度与相同数量的大写字母A相同：

＆＃13;

＆＃13;

.justify {
  display: inline-block;
  text-align: justify;
  text-align-last: justify;
  text-justify: inter-character;
}

＆＃13;

<h4>Before:</h4>
<div>
  <span>AAAAAAAAAAA</span>
  <br>
  <span>aaaaaaaaaaa</span>
</div>
<h4>After:</h4>
<div class="justify">
  <span>AAAAAAAAAAA</span>
  <br>
  <span>aaaaaaaaaaa</span>
</div>

＆＃13;

＆＃13;

＆＃13;

请注意，您还需要在容器display: inline-block上使用<div>，以便字母间距不会扩展以占据整个屏幕宽度。例如