CSS在html“行”中对齐文本

Question

鉴于以下内容：

<div style="float: left; line-height: 24px;">
    Would<br />
    Be Nice<br />
    If Aligned<br />
To the "top"<br />
</div>

观察到文字与Chrome中“行”的底部对齐（IE似乎是中心文字）。

有没有办法，没有将div（或span）中的每一行包裹到垂直对齐其“line”中的文本？

JSfiddle

Answer 1

这种方法存在一些问题：

来自align block elements on top when using line-height：

  

始终在每个字符的上方和下方添加行高。因此，如果您的font-size 12px 并且您的line-height 18px ，那么您将获得3px以上，每行“3”以下3px。这些3px空间中的每一个都被称为“半导体”

解决方案是相对地定位每个元素，然后应用负边距，但我们不能在这里这样做，因为每一行都不是它自己的元素，按照：

  

有没有办法，没有在div（或span）中包装每一行

如果您真的不愿意修改标记，那么这是一个JavaScript / CSS解决方法。当我们在文本上方有一半“领先”时，我们无法对齐。相反，我们需要摆脱顶部和底部的line-height间距，并在底部创建我们自己的间距。我们怎么知道每条线的底部在哪里？好吧，我们可以使用<br/>元素，但我们can't style a carriage return。

因此我们将使用javascript来获取可以设置样式的内容，然后以这种方式添加一些间距：

<强>的JavaScript ：

$('br').before('<div class="spacer"></div>');

<强> CSS ：

.spacer {
    height: 24px;
    display: inline-block;
}

Working Demo in JsFiddle

这应该是这样的：

**注意：使用inline-block div时，您必须将高度设置为line-height所需的高度，并将div文本垂直对齐到top 。您还可以使用regular div with a negative margin-top来占用段落之间的额外空间。*