cssletter-spacing

css letter space issue

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

enter image description here

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

Solution

  • 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'; /* &ensp; */
  letter-spacing: initial;
}
    <div>
  <p>
    Hello, I am Justin
  </p>
</div>