Search code examples
htmlcssletter-spacing

How to specific letter spacing in a sentence


I have added letter-spacing:-1px. However I also need to letter-spacing the hiragana(japanese) numbers. I can't solve this problem by using romanji letter. How do I tighter(make less space) only for these number?

I tried to add <span style>between the sentence, but it did not do anything.

See my jsfiddle

<div style="letter-spacing: -1px; font-weight: 500; text-transform: lowercase;"><strong>84m<sup>2</sup> ~ 450m<sup>2</sup> 食事食事室</strong></div>


Solution

  • you can use span for that, and avoid using inline styles:

    Snippet

    div {
      letter-spacing: -1px;
    }
    .has-letter-spacing{
      letter-spacing: -5px;
    }
    <h3>HAS LETTER-SPACING IN SPAN</h3>
    <div>
      <strong>84m<sup>2</sup> ~ 450m<sup>2</sup> <span class="has-letter-spacing">食事食事室</span></strong>
    </div>
    <hr />
    <h3>NO LETTER-SPACING IN SPAN</h3>
    <div>
      <strong>84m<sup>2</sup> ~ 450m<sup>2</sup> <span>食事食事室</span></strong>
    </div>