3

I would like to apply transformations on specific letters in a word.

In order to make my css transform property working, I'm forced to set display:inline-block; to my spans elements.

Unfortunately, as soon as I change from inline to inline-block, the width between my letters is changing.

enter image description here

Here's a code pen to illustrate my issue : https://codepen.io/michaelgrc/pen/XWNpaJd

I tried to play width the parent font-size to 0, with the space-wrap property, width the letter-spacing property, it doesn't work.

Does anyone have an idea ? Thank you very much

EDIT : the font-kerning property only allows me to have my first word like the second. But I want the opposite : I want my second word to look like the first.

Mark Rotteveel
  • 100,966
  • 191
  • 140
  • 197
Michaël
  • 489
  • 1
  • 5
  • 21
  • it's about the interaction between the A and V – Temani Afif Feb 13 '21 at 12:11
  • 1
    It's called font kerning. You can read about it [here](https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning). If you set it to "none" for class `basic-behavior` it all works as expected. – Gerard Feb 13 '21 at 12:12
  • 3
    Hi @Gerard, thanks for your answer but unfortunately I don't want my first sentence to look like the second one. I want the opposite. I want my second sentence to look like the first one. But your css property doesn't seems to do the trick... – Michaël Feb 13 '21 at 12:25
  • 1
    Why is this marked as duplicate? The linked questions don't solve the problem at hand (which is to keep kerning between adjacent text wrapped with an `inline-block` container). @Michaël I would recommend voting to reopen this issue (next to the follow link). – Monolith Sep 01 '22 at 03:31

0 Answers0