Help us understand the problem. What is going on with this article?

テキスト要素の先頭行だけline-heightを取り除き、上ぴったりに揃えるスタイルシートのテクニック

More than 1 year has passed since last update.

考え方

1.テキスト要素の全高(文字の高さ+上スペース+下スペース)は、line-heightにfont-sizeを掛けたものに等しくなります。
2.文字の高さはfont-sizeと等しい(近似値)と仮定します

2018082003.png
グリーン: font-size、オレンジ: font-sizeとline-height、■ブラック: 上スペース

先頭行だけを上に揃えるには、テキストのブロックからline-heightで加えられた上部のスペースだけを取り除けば実現できます。

SASS

@mixin lhCrop($line-height) {
  &::before {
    content: '';
    display: block;
    height: 0;
    width: 0;
    margin-top: calc((1 - #{$line-height}) * 0.5em);
  }
}

適用するテキスト要素に上記を含め、Mixinの引数としてline-heightの値を渡します。

.text-to-crop {
  @include lhCrop(1.2); //line-height: 1.2
}

demo

このルールは、使用するフォントによって異なります。例えばRobotoの文字の高さだと、font-sizeの75%になります。使用するフォントに合わせて、値をカスタマイズして利用してください。

margin-top: calc((0.75 - line-height) * 0.5em)

変数を利用すると使い勝手がよくなります。

@mixin lhCrop($line-height, $capital-letter) {
  &::before {
    content: '';
    display: block;
    height: 0;
    width: 0;
    margin-top: calc((#{$capital-letter} - #{$line-height}) * 0.5em);
  }
}

.text-to-crop {
  @include lhCrop(1.2, 0.75);
}

日本語でも数値を変えれば利用可能です。
demo

fujihiko
Webデザインおよびフロントエンドエンジニア。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした