html中如何让短横线的宽度与字母的宽度相同

Question

如图，第二行的一个短横线的宽度就小于第一行的大写A。

Answer 1

<style>
    .text{display:inline-block;width:12px;}//一般字符都是12个像素你可以自己调整，兼容一切浏览器。
</style>


var str = $('.box').html()//"ASBDASDA-ASDASD";
for(var i=0;i<str.length;i++){
    $('.box').append('<span class="text">'+str[i]+'</span>');
}

Answer 2

font-family: Consolas, Monaco, monospace; 使用等宽字体试试！

Answer 3

搞个自定义字体呗

Answer 4

使用等宽字体
用 <tt> 标签也能达到同样的效果