Jeśli mam <sup>
znacznik w znaczniku wieloliniowym <p>
, wiersz z indeksem górnym ma większy odstęp między wierszami nad nim niż inne wiersze, niezależnie od wysokości linii, którą umieściłem w <p>
.
Edytuj dla wyjaśnienia : nie mam na myśli, że mam wiele <p>
s, z których każdy jest w jednym wierszu. Mam singiel <p>
z wystarczającą zawartością, aby spowodować zawijanie w wielu wierszach. Gdzieś (gdziekolwiek) w tekście może znajdować się <sup>
lub <sub>
. Wpływa to na wysokość linii dla tej linii, dodając dodatkowe odstępy powyżej / poniżej. Jeśli ustawię większą wysokość linii, <p>
nie ma to znaczenia dla problemu. Wysokość linii jest zwiększona, ale dodatkowe odstępy pozostają.
Jak mogę to uczynić spójnym - tj. Wszystkie linie mają takie same odstępy, niezależnie od tego, czy zawierają znak, <sup>
czy nie?
Twoje rozwiązania muszą działać w różnych przeglądarkach (IE 6+, FF, safari, opera, chrome)
źródło
vertical-align: bottom
(chociaż to nie daje ci aż tyletop
), a potemposition:relative;
z pozytywemtop
.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; }
Sztuczka polega na ustawieniu
<sup>
wysokości linii na 0. @Scott powiedział, że używa normalnego, ale to nie zawsze działa.Oznacza to, że nie musisz zmieniać wysokości wiersza otaczającego tekstu, aby pomieścić tekst z indeksem górnym. Przetestowałem to w IE7 + i innych głównych przeglądarkach.
źródło
line-height
atrybutami. Oczywiście nadal może powodować przecięcia z poprzednią linią, jeśli ogólnaline-height
wartość jest oczywiście mała.line-height: 100%
w tym przypadku.line-height
I to 0, 1, 1em i 100%. Wszystkie z pewnością działają w przeglądarce Chrome i Firefox.Miałem ten sam problem i żadna z podanych odpowiedzi nie zadziałała. Ale znalazłem zobowiązanie git z poprawką, która działała dla mnie:
sup { font-size: 0.8em; line-height: 0; position: relative; vertical-align: baseline; top: -0.5em; }
źródło
zachowaj spokój:
sup { vertical-align: text-top; }
[ rozmiar czcionki zależny od indywidualnego kroju czcionki ]
źródło
sup, sub { vertical-align: baseline; position: relative; top: -0.4em; } sub { top: 0.4em; }
źródło
Wolę rozwiązanie sugerowane tutaj , czego przykładem jest ten 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>.
Piękno tego rozwiązania polega na tym, że możesz dostosować pionowe położenie indeksu górnego i dolnego, aby uniknąć kolizji z linią powyżej lub poniżej ... w powyższym, po prostu zwiększ lub zmniejsz,
0.2em
aby dopasować do swoich wymagań.źródło
Wolę używać
length
na wyrównaniu w pionie. Spowoduje to wyrównanie linii bazowej elementu na danej długości powyżej linii bazowej elementu nadrzędnego.sup { font-size: .83em; vertical-align: 0.25em; line-height: 0; }
źródło
Powód, dla którego
<sup>
znacznik wpływa na odstępy między dwoma wierszami, ma związek z wieloma czynnikami. Czynnikami są: wysokość wiersza, rozmiar indeksu górnego w stosunku do zwykłej czcionki, wysokość wiersza indeksu górnego i wreszcie, co jest dolnym indeksem górnym wyrównane z ... Jeśli ustawisz ... wysokość wiersza zwykłego tekstu, aby znalazł się w „pasmach tunelu” (tak to nazywam) o 135%, a zwykły tekst (100%) zostanie wypełniony białą o 35% więcej bieli. W przypadku akapitu wygląda to tak:p { line-height: 135%; }
Jeśli następnie nie zaznaczysz indeksu górnego na biało ... (tj. Utrzymasz wysokość linii na 0), indeks górny ma tylko szerokość własnego tekstu ... jeśli następnie poprosisz indeks górny, aby był procentem zwykłej czcionki przykład 70%) i wyrównujesz go ze środkiem zwykłego tekstu (tekst pośrodku), możesz wyeliminować problem i uzyskać indeks górny, który wygląda jak indeks górny. Oto ona:
sup { font-size: 70%; vertical-align: text-middle; line-height: 0; }
źródło
Aby wszystkie wiersze były wyższe i wyglądały tak samo, jak wiersz z indeksem górnym, zdefiniuj większy
line-height
dla całego akapitu<p style='line-height:150%'>
lub jakakolwiek wartość daje pożądany efekt.
Może to wyglądać dziwnie, ale tak właśnie opisałeś swoje wymagania.
EDYCJA: Aby wszystkie wiersze wyglądały tak samo, gdy tylko jeden potrzebuje więcej odstępu w pionie niż inne , WSZYSTKIE wiersze w akapicie będą musiały być wyższe.
Jak powiedziałem, może to nie być atrakcyjne rozwiązanie. Może coś można zrobić o rozpiętości co tylko tekst z Sub / SuperScript mniejszy , poza tym nie wierzę, co chcesz może zostać osiągnięty. Ale chciałbym zobaczyć rozwiązanie kogoś innego.
EDIT2: Nawiasem mówiąc, próbowałem małego pliku html zawierającego
<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>
Wszystkie linie mają tę samą wysokość w FF3.0.14 i Konquerorze (nie mogę mówić o innych przeglądarkach)
źródło
Używałem line-height: normal dla indeksu górnego, który działa dobrze dla mnie w Safari, Chrome i Firefox, ale nie jestem pewien co do IE.
źródło
Wykorzystaj to szczególnie w biuletynie -
<sup style="font-size:9px; line-height:8px;">®</sup>
źródło
Podoba mi się rozwiązanie Milingu Kilu, ale w tym samym duchu, który wolę
sup { vertical-align:top; line-height:100%; }
źródło
& sup1, & sup2 itd. mogą załatwić sprawę. to sztuczka HTML do indeksu górnego
źródło
Odpowiedź z tego miejsca działa zarówno w phantomjs, jak i w HTML-u osadzonym w wiadomości e-mail:
Lorem ipsum <sup style="font-size: 8px; line-height: 0; vertical-align: 3px">®</sup>
źródło