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

Question

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

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

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

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

Answer 1

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; }

Конечно, это рискует врезаться в приведенную выше строку, если вам не хватает высоты строки.

Answer 2

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

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

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

Answer 3

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

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

Answer 4

будь проще:

sup { vertical-align: text-top; }

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

Answer 5

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

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

Answer 6

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

 p
    {
            line-height: 135%;
    }

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

sup
{
    font-size: 70%;
    vertical-align: text-middle;
    line-height: 0;
}

Answer 7

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}
sub { 
  top: 0.4em; 
}

Answer 8

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

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

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

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

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

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

РЕДАКТИРОВАТЬ2:Кстати, я попробовал небольшой 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 (за другие браузеры не говорю)

Answer 9

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

Answer 10

Специально используйте это в информационном бюллетене -

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

Answer 11

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

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

Answer 12

&sup1, &sup2 и т. д.может сработать.это трюк HTML с надстрочным индексом

Answer 13

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

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