HTML-тег <sup />, влияющий на высоту строки, как сделать его согласованным?

130

Если у меня есть <sup>тег в многострочном <p>теге, строка с надстрочным индексом на нем имеет больший межстрочный интервал над ним, чем другие строки, независимо от того, какую высоту строки я поставил <p>.

Изменить для пояснения : я не имею в виду, что у меня много <p>s, каждый из которых находится в одной строке. У меня есть сингл, в <p>котором достаточно содержимого, чтобы вызвать перенос на несколько строк. Где-нибудь (где угодно) в тексте может стоять <sup>или <sub>. Это влияет на высоту строки для этой строки, добавляя дополнительный интервал выше / ниже. Если я установлю большую высоту строки, <p>это не повлияет на проблему. Line-height увеличивается, но остается дополнительный интервал.

Как я могу сделать это согласованным - то есть все строки имеют одинаковый интервал, независимо от того, содержат они <sup>или нет?

Ваши решения должны быть кроссбраузерными (IE 6+, FF, Safari, Opera, Chrome).

Эндрю Баллок
источник

Ответы:

172

line-height исправляет это, но вам, возможно, придется сделать его довольно большим: в моих настройках я должен увеличить 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; }

Конечно, это рискует попасть в строку выше, если у вас недостаточно line-height.

bobince
источник
1
вертикальное выравнивание исправил, спасибо. Даже огромная высота строки 300% + не исправляет это в IE8, Chrome 3 или FF 3.5. Я все еще получаю 1-2 пикселя разницы.
Эндрю Баллок,
Как уже упоминалось, это не всегда работает, если высота строки слишком мала.
Ric
5
@simPod: Та же ситуация vertical-align: bottom(хотя это не так сильно top), а затем position:relative;с позитивом top.
bob
на самом деле я бы предпочел {vertical-align: super}, потому что он предотвращает некоторые сбои отображения с высотой строки в IE8, насколько я помню. Я бы постарался не использовать позиционирование часто, если есть лучшие альтернативы. Неосторожное размещение сверху может привести к каскадным проблемам в дальнейшем в проекте.
All Bits Equal
89
sup {
    line-height: 0;

    /* The following rules (or similar) likely come from browser 
     * style and are not needed
     */
    font-size: 0.83em;
    vertical-align: super;
}

Хитрость заключается в том, чтобы установить <sup>line-height равным 0. @Scott сказал, что использует нормально, но это не всегда работает.

Это означает, что вам не нужно изменять высоту строки окружающего текста, чтобы разместить надстрочный текст. Я тестировал это в IE7 + и других основных браузерах.

Ric
источник
2
+1. Как уже отмечалось, это предотвращает конфликты с другими line-heightатрибутами. Конечно, это может привести к пересечению с предыдущей линией, если line-height, конечно, общее значение будет небольшим.
Крис Кричо
фантастическое решение, избавляет от плохого поведения хрома! Самый простой ответ.
Актау
Только что понял, что это повлияет на нестандартную высоту строки окружающего текста. Используйте line-height: 100%в этом случае.
Matthias Hauert
Это прекрасно работает. Кроме того, line-heightя нашел возможные значения 0, 1, 1em и 100%. Все это определенно работает в Chrome и Firefox.
ClarkeyBoy
Я также предпочитаю этот ответ для моего варианта использования: этот ответ работает с электронными письмами в Gmail, а принятый ответ - нет. stackoverflow.com/questions/21118072/…
Мшник
7

У меня была такая же проблема, и ни один из приведенных ответов не работал. Но я нашел коммит git с исправлением, которое мне помогло:

sup {
  font-size: 0.8em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}
PiTheNumber
источник
2

будь проще:

sup { vertical-align: text-top; }

[ размер шрифта зависит от вашего индивидуального шрифта]

Милингу Килу
источник
2
sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}
sub { 
  top: 0.4em; 
}
Ануп Пури
источник
3
Пожалуйста, предоставьте объяснение с вашим кодом, чтобы OP мог извлечь из него уроки.
EBH
1

Я предпочитаю использовать lengthвертикальное выравнивание. Это выравнивает базовую линию элемента на заданной длине над базовой линией его родителя.

sup {
   font-size: .83em;
   vertical-align: 0.25em;
   line-height: 0;
}
Даллас
источник
1

Причина, по которой <sup>тег влияет на интервал между двумя строками, связана с рядом факторов. Факторами являются: высота строки, размер верхнего индекса относительно обычного шрифта, высота строки верхнего индекса и, наконец, что не менее важно, то, что является нижней частью верхнего индекса, совпадающим с ... Если вы установите ... высоту строки если обычный текст находится в "туннельной полосе" (так я это называю) 135%, тогда обычный текст (100%) становится белым, с добавлением 35% большего количества белого. Для абзаца это выглядит так:

 p
    {
            line-height: 135%;
    }

Если вы затем не добавляете белый верхний индекс ... (то есть сохраняете высоту строки равной 0), верхний индекс имеет только ширину собственного текста ... если вы затем запрашиваете верхний индекс в процентах от обычного шрифта (для пример 70%), и вы выравниваете его по середине обычного текста (text-middle), вы можете устранить проблему и получить верхний индекс, который выглядит как верхний индекс. Вот:

sup
{
    font-size: 70%;
    vertical-align: text-middle;
    line-height: 0;
}
энный
источник
1

Я предпочитаю предлагаемое здесь решение , как показано на примере 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соответствии с вашими требованиями.

drmrbrewer
источник
0

Чтобы сделать все строки выше , чтобы они выглядели так же, как строка с надстрочным индексом, задайте больший размер line-heightдля всего абзаца.

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

или любое другое значение, которое дает желаемый эффект.

Это может показаться странным, но вы так описали свои требования.

РЕДАКТИРОВАТЬ: чтобы все линии выглядели одинаково, когда только одному нужно больше вертикального пространства, чем другим , ВСЕ строки в абзаце должны быть выше.

Это, как я уже сказал, не может быть привлекательным решением. Может быть, что-то можно сделать с диапазоном, уменьшив только текст с нижним / верхним индексом , кроме этого, я не верю, что то, что вы хотите, может быть достигнуто. Но хотелось бы увидеть чужое решение.

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 (я не могу говорить о других браузерах)

pavium
источник
1
Я сказал в вопросе, что это не решает проблему. Я добавил разъяснения на случай, если вы неправильно поняли
Эндрю Баллок,
да, я понимаю, если мне нужно больше места для одной строки, для единообразия мне нужно добавить дополнительное место для других, это очевидно. Я имею в виду, что line-height не исправляет это, это увеличивает пространство, да, но все еще есть дополнительное пространство с sup
Эндрю Баллок
Может быть, есть разница между браузерами - в конце концов, принятый вами ответ начинается со слов «line-height действительно исправляет», но мы не знаем, какой браузер использовал bobince.
павиум
0

Я использовал line-height: normal для надстрочного индекса, который у меня отлично работает в Safari, Chrome и Firefox, но насчет IE я не уверен.

Скотт Чендлер
источник
0

Специально используйте это в рассылке новостей -

<sup style="font-size:9px; line-height:8px;">&reg;</sup>
ХАДИ
источник
0

Мне нравится решение Milingu Kilu, но в том же духе я предпочитаю

sup { vertical-align:top; line-height:100%; }
BIGMAT
источник
0

& sup1, & sup2 и т. д. могут помочь. это HTML-трюк для надстрочного текста

Риццоли
источник
0

Ответ отсюда , работает как в phantomjs, так и во встроенном в электронную почту HTML:

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

TheZver
источник