How to make the width of the dash line the same as the width of the letter in html

clipboard.png
as shown in the figure, the width of a dash in the second line is less than the uppercase An of the first line.

Jan.08,2022

<style>
    .text{display:inline-block;width:12px;}//12
</style>


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

font-family: Consolas, Monaco, monospace; try using equal width fonts!


create a custom font


use a font of equal width
use the < tt > tag to achieve the same effect

Menu