【CSS】複数行の時だけ line-height を指定する

複数行のときだけ line-height を効かせたい場合があります。

逆に言うと、1行なら特に指定したくない。

この場合、CSS の first-line 疑似要素が使えます。

span {
  font-size: 14px; // 文字サイズ
  line-heigth: 20px; // 複数行の場合、行間を開けたい
}
span::first-line {
  line-height: 14px; // 1行なら文字サイズと同じ高さ
}

developer.mozilla.org