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

有什么方法可以改变标签样式css并拥有所有行高度完全相同的文字

为什么你不使用<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

Answer 2

根本不要使用sub元素。相反，使用例如<span class=sub>...</span>以及使内容垂直降低的样式表，并根据需要设置字体大小。对于垂直降低，您可以使用position: relative和top或bottom的合适值;这使得内容移位而不影响线之间的间距。例如，

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

您可以使用sub元素并使用vertical-align: baseline取消其对垂直放置的影响，但是由于a，您将难以以跨浏览器的方式设置字体大小粗略的IE错误（将font-size sub值中的一个百分比解释为相对于它用于该元素的默认大小，而不是正确地将其与父元素的字体sie相关联，就像其他浏览器一样）。

注意：sub元素不会更改line-height，但通常会使行框的高度更大。这就是您无法通过设置line-height来解决问题的原因。

Answer 3

尝试使用line-height

这样的JSFiddle CSS属性

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

请记住，下标标记使文本显示为当前行的下标。默认情况下，在子标记上设置vertical-align:sub;属性。因此，如果您只是想让文本变小，那么要么过度使用，要么不使用子标记。

编辑问题后编辑

下标行不比任何其他行宽。只是行中的下一个单词无法适应当前行中可用的剩余宽度，因此单词将转到新行。请参阅此JsFiddle以验证此点，或者您也可以使用text-align: justify来完成所有线条合理。见JsFiddle #3

Answer 4

你可以做到这一点

sub {
    vertical-align: middle
}

但文字几乎正常。 http://jsfiddle.net/BzqFb/7/

您也可以使用跨度并将跨度字体大小更改为较小的字体

使用<sub>标签并保留line-height </sub>

4 个答案: