HTML тег <sup />, влияющий на высоту строки, как сделать его согласованным?
Если у меня есть <sup> тег в многострочном <p> тег, строка с верхним индексом на нем имеет больший межстрочный интервал над ним, чем другие строки, независимо от того, какую высоту строки я положил на <p>,
Изменить для уточнения: я не имею в виду, у меня много <p>s, каждый из которых находится на одной строке. У меня есть один <p> с достаточным содержанием в нем, чтобы вызвать перенос на несколько строк. Где-то (где угодно) в тексте может быть <sup> или же <sub>, Это влияет на высоту линии для этой линии, добавляя дополнительный интервал выше / ниже. Если я установлю большую высоту строки на <p> это не имеет значения к проблеме. Высота строки увеличивается, но дополнительный интервал все еще остается.
Как я могу сделать это согласованным - т.е. все строки имеют одинаковый интервал, содержат ли они <sup> или нет?
Ваши решения должны быть кросс-браузерными (IE 6+, FF, Safari, Opera, Chrome)
16 ответов
line-height действительно исправляет это, но вам, возможно, придется сделать его довольно большим: в моих настройках я должен увеличить высоту строки примерно до 1,8 до <sup> больше не мешает, но это будет варьироваться от шрифта к шрифту.
Один из возможных подходов для получения согласованной высоты строк - установить собственный стиль надстрочного индекса вместо значения по умолчанию vertical-align: super, Если вы используете top он ничего не добавит к строчному блоку, но вам, возможно, придется уменьшить размер шрифта, чтобы подогнать его под размер:
sup { vertical-align: top; font-size: 0.6em; }
Еще один хак, который вы можете попробовать, это использовать позиционирование, чтобы немного поднять его, не затрагивая линейный блок:
sup { vertical-align: top; position: relative; top: -0.5em; }
Конечно, это рискует врезаться в строку выше, если вам не хватает высоты строки.
sup {
font-size: 0.83em;
vertical-align: super;
line-height: 0;
}
Хитрость заключается в том, чтобы установить <sup>Высота строки до 0. @Scott сказал использовать обычный, но это не всегда работает.
Это означает, что вам не нужно изменять высоту строки окружающего текста, чтобы разместить текст надстрочного индекса. Я проверял это в IE7+ и других основных браузерах.
У меня была такая же проблема и ни один из приведенных ответов не сработал. Но я нашел git commit с исправлением, которое сработало для меня:
sup {
font-size: 0.8em;
line-height: 0;
position: relative;
vertical-align: baseline;
top: -0.5em;
}
успокойся:
sup { vertical-align: text-top; }
[размер шрифта зависит от вашего индивидуального шрифта]
Я предпочитаю предлагаемое здесь решение, как показано на примере jsfiddle:
CSS:
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.2em;
}
sub {
top: 0.2em;
}
HTML:
<span>The following equation is perhaps the most well known of all: </span><span id="box">E<sub>a</sub> = mc<sup>2</sup></span><span>. And it gives an opportunity to try out a superscript and even throw in a superfluous subscript! I'm sure that Einstein would be pleased.</span>.
Прелесть этого решения в том, что вы можете настроить вертикальное расположение верхнего и нижнего индекса, чтобы избежать каких-либо конфликтов с линией выше или ниже... в приведенном выше примере просто увеличьте или уменьшите 0.2em в соответствии с вашими требованиями.
Мне нужно было изменить поведение <sup> по умолчанию только в одном разделе страницы, поэтому я применил класс там. Также для меня vertical-align: top работало нормально, увеличилось примерно на 4 пикселя.
sup.my-class {
vertical-align: top;
position: relative;
top: -4px;
}
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.4em;
}
sub {
top: 0.4em;
}
Причина, почему <sup> тег влияет на расстояние между двумя строками связано с рядом факторов. Факторами являются: высота строки, размер надстрочного индекса по отношению к обычному шрифту, высота строки надстрочного индекса и, наконец, что не менее важно, что нижний верхний индекс выровнен с... Если вы установите... высоту строки обычного текста, который будет находиться в "туннельной полосе" (это я так называю) в 135%, тогда обычный текст (100%) будет дополнен белым на 35% больше белого. Для абзаца это выглядит так:
p
{
line-height: 135%;
}
Если затем вы не добавляете белый верхний верхний индекс...(т.е. сохраняете его высоту строки равным 0), верхний индекс имеет только ширину своего собственного текста... если вы тогда попросите верхний индекс быть процентом от обычного шрифта (для пример 70%), и вы выравниваете его с серединой обычного текста (text-middle), вы можете устранить проблему и получить верхний индекс, который выглядит как верхний индекс. Вот:
sup
{
font-size: 70%;
vertical-align: text-middle;
line-height: 0;
}
Я предпочитаю использовать length по вертикали. Это выравнивает базовую линию элемента на заданную длину выше базовой линии его родителя.
sup {
font-size: .83em;
vertical-align: 0.25em;
line-height: 0;
}
Мне нравится решение Milingu Kilu, но в том же духе я предпочитаю
sup { vertical-align:top; line-height:100%; }
Вот что у меня работает:
<div>
<span>line</span><br/>
<span>span styled with vertical align super</span><span style="vertical-align:super;">1</span><br/>
<span>line</span><br/>
<span>same as before but line height set to 0</span><span style="vertical-align:super; line-height:0; font-size:.75em">1</span><br/>
<span>line</span><br/>
<span>now using sup tag and sup class with line height 0</span><sup style="line-height: 0">1</sup><br/>
<span>line</span>
</div>
Я использовал высоту строки: нормально для верхнего индекса, который отлично работает для меня в Safari, Chrome и Firefox, но я не уверен насчет IE.
Чтобы сделать все строки выше, чтобы они выглядели так же, как строки с верхним индексом, определите больший line-height для всего параграфа
<p style='line-height:150%'>
или какое-либо значение дает желаемый эффект.
Это может выглядеть странно, но именно так вы описали свои требования.
РЕДАКТИРОВАТЬ: Чтобы все строки выглядели одинаково, когда только одна из них требует больше вертикального пространства, чем другие, ВСЕ строки в абзаце должны быть выше.
Это, как я уже сказал, не может быть привлекательным решением. Может быть, что-то можно сделать с помощью span, сделав только текст с под / верхним индексом меньшим, кроме того, я не верю, что вы можете достичь желаемого. Но я бы хотел увидеть чье-то решение.
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 (я не могу говорить о других браузерах)
¹, ² и т. д. могут помочь. это трюк HTML для надстрочного индекса
Специально используйте это в рассылке -
<sup style="font-size:9px; line-height:8px;">®</sup>
Ответ отсюда, работает как в phantomjs, так и во встроенном в электронную почту HTML:
Lorem ipsum <sup style="font-size: 8px; line-height: 0; vertical-align: 3px">®</sup>