6

大きな文字が行の高さを引き伸ばさないように、CSSで行の高さを強制するにはどうすればよいですか。代わりに、上記の行の下でクリップするか、上記の行とマージする必要があります。

CSSline-heightは、デフォルトでMSWordの「少なくとも」行の高さオプションのように機能するようです。MSWordの「正確に」オプションのように機能させたいと思います。

例えば：

1つの行に大きな文字が含まれているため、行の高さは同じではありません。関係なく、すべての線を同じ高さにしたいと思います。

4

4 に答える 4

8

グリフ (文字の視覚的表現) は、インライン ボックス内の垂直方向の中央に配置されます。行の高さがコンテンツの高さよりも大きい場合、差の半分が上部にスペースとして追加されます。同じ量が下部にも追加されます。

これは、例の太字ではないメインのテキストの場合です。

置換されていないインライン要素に設定すると、周囲の行ボックスの高さを計算するために使用される高さを指定します。

そのため、太字のテキストでは、フォント サイズよりも 8.5 ピクセル大きくなり、問題が発生します。

line-heightを font-sizeよりも小さく設定することで、これを防ぐことができます(このデモを確認してください)。これはインライン要素であるため、overflow:hidden;完全に表示されることはありませんが、残りのテキストの行の高さにピクセルが追加されることはありません。

transform:scale(value)私の知る限り、CSS3 プロパティなどを使用しない限り、文字を「伸ばす」ことはできません。

参照

コード：

<p>ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac <b>ac</b>
ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac</p>

CSS:

p {
    line-height:17px;        
    font-size:15px;
    width:150px;
}
b {
    font-size:25px;
    line-height:1px; 
}​
于 2012-09-28T15:38:27.123 に答える
1

これがあなたの後であるかどうかはわかりませんが、これにより、行の高さよりも大きいテキストが切り取られます。

b {
    display:inline-block;
    overflow:hidden;
    vertical-align:top;
   }
于 2012-09-28T15:33:01.263 に答える
0

たぶん追加

display:inline-block;
height:13px;

bタグに

于 2012-09-28T15:10:53.723 に答える
-1

とんでもない。たとえば 30px のように行の高さを大きくすると、すべての行が同じ高さになります。

于 2012-09-28T15:01:29.373 に答える