letter-spacingで字間を開けたときに最後の字の後ろまで開いてしまう問題への対処法

  • 18
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

letter-spacingで字間を開けたとき、最後の字の後ろまで開いてしまう。

<p>あいうえお<strong>かきくけこ</strong>さしすせそ</p>
strong {
  letter-spacing: 1em;
}

最後の字の後ろを開けたくない場合、負の右マージンを使う。

<p>あいうえお<strong>かきくけこ</strong>さしすせそ</p>
strong {
  letter-spacing: 1em;
  margin-right: -1em;
}

なお、ブロックレベル要素にこの方法は使えない。インライン要素に使うべし。

<p><span>あいうえお</span></p>
p {
  text-align: right;
  background: red;
}
p span {
  letter-spacing: 1em;
  margin-right: -1em;
}

letter-spacingで字間を空けた要素に下線が引かれている場合、負の右マージンで最後の字の後ろの空間を取り去っても、下線はその空間があった領域まで及んでしまう。

<p>あいうえお<strong>かきくけこ</strong>さしすせそ</p>
strong {
  text-decoration: underline;
  letter-spacing: 1em;
  margin-right: -1em;
}

このように負の右マージンでうまくいかない場合は、最後の1文字だけ抜かしたspan要素を生成し、その字間を空けるしかない。

<p>あいうえお<strong><span>かきくけ</span></strong>さしすせそ</p>
strong {
  text-decoration: underline;
}
strong span {
  letter-spacing: 1em;
}