css letter space issue

Question

i need to set letter space to a negative value. but i found a problem.

when set letter space css attribute to a negative value on p tag. p tag bounding box doen't contain text as below

here is code

div {
  display: inline-block;
  background: red;
}

p {
  display: inline-block;
  letter-spacing: -0.3em;
}

<div>
  <p>
    Hello, I am Justin
  </p>
</div>

is there any way p tag bounding box can contain text? or impossible? please give me any idea

Answer 1

letter-spacing also applies to the last character, unfortunately. Even though it should be only affecting spacings between letters. This is a known bug that has been discussed for a long time.

Currently, to get rid of the negative letter-spacing after the last character, there are several work-arounds. One of them is to add a padding on the right to counter it:

div {
  display: inline-block;
  background: red;
}

p {
  display: inline-block;
  letter-spacing: -0.3em;
  padding-inline-end: 0.3em;
}

<div>
  <p>
    Hello, I am Justin
  </p>
</div>

Or utilizing a pseudo element and giving it a letter-spacing: initial

div {
  display: inline-block;
  background: red;
}

p {
  display: inline-block;
  letter-spacing: -0.3em;
}

p::after {
  content: '\2002'; /*   */
  letter-spacing: initial;
}

<div>
  <p>
    Hello, I am Justin
  </p>
</div>