Geek asks and answers

Using the <sub> tag and keeping the line height

I have long text with some indexes and superscript tags. Example:

<div>hello <sub>world</sub>, how are you? Translated as logical aggregates or associative compounds, these characters have been interpreted as combining two or more pictographic or ideographic characters to suggest a third meaning.</div>

Example in the mode http://jsfiddle.net/BzqFb/

Now I see that lines of text with text are wider than those that have no text. Is there a way to change the style of the css tag and have all lines of text with the same height?

And are there any texts that can change the line height in HTML text?

EDIT: I want to have substring behavior, not just small text. I can make the line height large so that the text of the subscript matches the line, but still the line with the indexed text is wider than the line without the interlinear text.

+3
source share
4 answers

sub . , , <span class=sub>...</span> , , , . position: relative top bottom; , . ,

.sub { position: relative; top: 0.8ex; font-size: 75%; }

sub vertical-align: baseline, - - IE ( in font-size sub , , , font sie, ).

. sub line-height, . , line-height.

+1

css

<small>? :

<div class="container">hello <small>world</small>, how are you? ...</div>

position: relative; top of 0.2em, :

sub {
    vertical-align: text-bottom; /* <-- Reset the user agent stylesheet   */
    position: relative;          /* <-- Set position to the element       */
    top: .2em;                   /* <-- Move the <sub> element down a bit */
}

FIDDLE

+2

line-height CSS, JSFiddle

.container {
    width: 300px;
    line-height: 30px;
}

, . vertical-align:sub; . , , .

,

, . , , , . JsFiddle , text-align: justify, . JsFiddle # 3

0

,

sub {
    vertical-align: middle
}

. http://jsfiddle.net/BzqFb/7/

span

0

More articles:


All Articles