web-dev-qa-db-ja.com

行の高さに影響するHTML <sup />タグ、それを一貫させる方法

複数行の<sup>タグに<p>タグがある場合、上付き文字のある行の行間隔は、どの行の高さに関係なく、他の行よりも大きくなります<p>。

明確化のために編集：<p>sがたくさんあるわけではありませんが、それぞれが1行になっています。単一の<p>があり、その中に十分なコンテンツがあり、複数行に折り返します。テキストのどこか（どこでも）<sup>または<sub>があります。これは、上/下に余分なスペースを追加することにより、その行の行の高さに影響します。 <p>の行の高さを大きく設定しても、これは問題になりません。行の高さは増加しますが、余分なスペースは残ります。

どうすれば一貫性を保つことができますか？つまり、<sup>が含まれているかどうかに関係なく、すべての行に同じ間隔がありますか？

ソリューションはクロスブラウザ（IE 6 +、FF、サファリ、オペラ、クロム）でなければなりません

htmlcsssubscriptsuperscript
117
Andrew Bullock

行の高さはそれを修正しますが、かなり大きくする必要があります：私の設定では、<sup>が干渉しないように行の高さを約1.8に増やす必要がありますが、これはフォントによって異なりますフォント。

一貫した行の高さを取得する1つの可能なアプローチは、デフォルトのvertical-align: superの代わりに独自の上付き文字スタイルを設定することです。 topを使用する場合、ラインボックスには何も追加されませんが、フォントサイズをさらに小さくする必要がある場合があります。

sup { vertical-align: top; font-size: 0.6em; }

あなたが試みることができる別のハックは、ラインボックスに影響を与えずに少し上に移動するためにポジショニングを使用することです：

sup { vertical-align: top; position: relative; top: -0.5em; }

もちろん、行の高さが十分でない場合、上記の行にクラッシュする危険があります。

160
bobince
sup {
        font-size: 0.83em;
        vertical-align: super;
        line-height: 0;
    }

トリックは、<sup>の行の高さを0に設定することです。@ Scottは、通常を使用すると言いましたが、これは常に機能するとは限りません。

つまり、変更する必要はありません上付きテキストに対応する周囲のテキストの行の高さです。 IE7 +およびその他の主要なブラウザーでこれをテストしました。

77
Richard Le Poidevin

私は同じ問題を抱えていて、与えられた答えのどれもうまくいきませんでした。しかし、私は git commit を見つけて、私のために働いた修正を加えました：

sup {
  font-size: 0.8em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}
6
PiTheNumber

<sup>タグが2行の間隔に影響を与える理由は、いくつかの要因に関係しています。要因は次のとおりです。行の高さ、通常のフォントに対する上付き文字のサイズ、上付き文字の行の高さ、そして最後に重要なのは、上付き文字の一番下の位置です。通常のテキストの135％の「トンネルバンド」（これを私が呼ぶもの）に入れると、通常のテキスト（100％）には、35％の白が埋め込まれます。段落の場合、これは次のようになります。

 p
    {
            line-height: 135%;
    }

その後、上付き文字を白で埋めない場合...（つまり、行の高さを0に保つ）上付き文字は、それ自体のテキストの幅のみを持ちます...上付き文字に通常のフォントの割合を求める場合（例70％）、それを通常のテキストの中央（テキスト中央）に揃えると、問題を解消し、上付き文字のように見える上付き文字を取得できます。ここにあります：

sup
{
    font-size: 70%;
    vertical-align: text-middle;
    line-height: 0;
}
1
nth
sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}
sub { 
  top: 0.4em; 
}
1
Anup Puri

簡単にしてください：

sup { vertical-align: text-top; }

[font-size個々の書体に依存]

1
Milingu Kilu

垂直方向にlengthを使用することを好みます。これにより、要素のベースラインが、親のベースラインより上の指定された長さに揃えられます。

sup {
   font-size: .83em;
   vertical-align: 0.25em;
   line-height: 0;
}
1
Dallas

私は行の高さを使用してきました：上付き文字には通常、Safari、Chrome、Firefoxで正常に動作しますが、IEについてはわかりません。

0
Scott Chandler

すべての行をtallerにするには、上付きの行と同じように見えるように、段落全体に大きなline-heightを定義します

<p style='line-height:150%'>

またはあなたが望む効果を与えるどんな値でも。

奇妙に見えるかもしれませんが、それが要件を説明する方法です。

編集：すべての行を同じに見えるようにするために1つだけが他よりも垂直方向のスペースが必要な場合、段落内のすべての行はより高くなければなりません。

私が言ったように、これは魅力的な解決策ではないかもしれません。たぶん、下/上付きのテキストだけを作成するスパンで何かを行うことができますsmaller、それを除けば、あなたが望むものを達成できるとは思わない。しかし、私は他の誰かの解決策を見たいです。

EDIT2：ちなみに、私は含む小さなHTMLファイルを試しました

<html>
<head>
<title>line-height</title>
<style>
p {
    line-height : 1.5em;
    width : 25em;
}
</style>
</head>
<body>
<p>Mary had a little lamb, its fleece<sup>1</sup> was white as snow, 
and everywhere that Mary went, the lamb<sub>2</sub> was sure to go.
</p>
</body>
</html>

そして、FF3.0.14とKonquerorの行はすべて同じ高さです（他のブラウザでは話せません）

0
pavium

＆sup1、＆sup2などがトリックを行う可能性があります。上付きのHTMLトリックです

0
Rizzoli

here からの回答は、phantomjsと電子メール埋め込みHTMLの両方で機能します。

Lorem ipsum <sup style="font-size: 8px; line-height: 0; vertical-align: 3px">&reg;</sup>
0
TheZver

特にニュースレターでこれを使用してください-

<sup style="font-size:9px; line-height:8px;">&reg;</sup>
0
HADI

Milingu Kiluのソリューションが好きですが、同じ精神で私は好みます

sup { vertical-align:top; line-height:100%; }
0
Bigmat