段落中的行高问题答案

【问题标题】：Issue with line-height within a paragraph段落中的行高问题
【发布时间】：2016-01-22 10:09:38
【问题描述】：

我正在使用 WordPress 并将一个类应用于一段帖子文本。

这是我的帖子

<p>
    <span class="disclaimer">A really long line of text that covers more than one line.</span>
</p>

这是我的 CSS

p > .disclaimer {
    font-size: 50%;
    line-height: 50%;
}

这是我的问题：
字体变小了 50%，但行高却没有。无论我为 line-height 输入什么值，它的大小都不会正确。换行时，文本显示出巨大的间距。

【问题讨论】：

【解决方案1】：

您需要将line-height 放在p 而不是span：

p {
  line-height: 50%;
  width:100px; /* for example only*/
}
.disclaimer {
  font-size: 50%;
}

&lt;p&gt;&lt;span class="disclaimer"&gt;A really long line of text that covers more than one line.&lt;/span&gt;&lt;/p&gt;

【讨论】：

你也打败了我 :) 但只需要注意：使用 Unitless Line Heights css-triks , another link 是一个好习惯。所以你可以试试line-height: 0.5 而不是line-height: 50%;
@pgk，我也会使用 0.5，但由于 50% 在原始问题中，我不想改变太多
@Pete - 当然我向未来的读者提到了这个 :)。

【解决方案2】：

试试

p > .disclaimer {
font-size: 50%;
line-height: 50%;
display:block;}

【讨论】：

【解决方案3】：

line-height 对 inline 元素的作用与对 block 元素的作用不同。

在你的 span 的 css 中尝试display: block;，或者如果你需要使用 span 作为内联元素，你可以参考 here

【讨论】：