Wrapping character “Y” in span, increases the margin to next character

前端 未结 3 1185
北海茫月
北海茫月 2021-01-18 00:10

In my current project, I need to wrap every single character of a sentence within a span, so I can measure the distance from the beginning of the sentence up until the chara

3条回答
  •  醉梦人生
    2021-01-18 00:47

    Whether this happens seems to depend on your browser's default font. Some fonts may have kerning (letter spacing adjustments) that reduces the space between a capital Y and a short letter or dash.

    It seems that Chrome's text rendering engine either uses more kerning than other browsers, or fails to apply it when there's a html tag between the letters.

    You can resolve this issue by giving your div a specified font-family:

    div {
        font-family: Courier New;
    }
    

    (does not have to be a monospace font, but those are guaranteed to not have kerning)

提交回复
热议问题