html - 使用 <sub> 标签并保持行高

Question

我有一段带有一些下标和上标标签的长文本。示例:

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

实例在 http://jsfiddle.net/BzqFb/

现在我可以看到有文本的文本行比没有文本的文本行宽。有什么办法可以更改标签样式 css 并使所有文本行的高度完全相同？

是否有某种文本可以改变 HTML 文本中的行高？

编辑:我想要下标行为，而不仅仅是小文本。我可以使行高变大，以便下标文本适合该行，但带有下标文本的行仍然比没有下标文本的行宽。

Answer 1

Is there any way how I can change tag style css and have all lines of text with exactly same height

为什么你不使用 <small>元素？它使文本与相同的行高垂直对齐:

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

Fiddle Demo

根据原始发帖人的评论，您可以使用 position: relative;为下标元素设置一个 top的 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 */
}

UPDATED FIDDLE