3

CSS を使用して、ボックス (またはその親) の行の高さでボックスの高さを調整するにはどうすればよいですか?

これにより、テキストの領域を行数の正確な倍数にすることが簡単にできます。たとえば、正確に 3 行を表示できます。

JavaScript ソリューションは一般的に遅く、動的に再レン​​ダリングされたレイアウトとのやり取りが不十分であるため、JavaScript ソリューションは必要ありません。

編集:私の場合の行の高さは、 MDN で推奨され ているように、単位のない数値で指定されているため、これを機能させるために行の高さの単位が必要ない場合に便利です。

4

1 に答える 1

5

質問を完全に理解したかどうかはわかりませんが、相対単位 - ems を使用できませんか?

たとえば、行の高さが 2ems (または単位なし) で、ボックスの高さの合計を 3 "行" にしたい場合 (おそらくパディングを考慮しない場合)、高さを 6ems に設定できます。このように、行の高さは基本単位 (フォント サイズ) に基づいて柔軟になり、高さも同じ基本単位を使用して流動的になります。

次に例を示します。

.myBox {
     line-height: 2; // this will be twice the value of the font-size
     height: 6ems; // equivalent to 3 lines high

SASS で同じことを実現するには、次のように記述します。

$lineheight: 2; // this value can be unitless or a unit like ems, px or percentage
$numberoflines: 3; 
.myBox {
    line-height: $lineheight;
    height: $lineheight * $numberoflines;
}

これにより、変数を設定ファイルに移動する柔軟性が得られるため、変数を使用するすべてのセレクターを見つける必要なく、ユーザー (または他の誰か) が値を簡単に変更できます。

于 2013-08-08T08:36:12.970 に答える