从下到上对齐多行文字

Question

也许这不是最好的标题所以这里是一个例子： 一个固定宽度的div，包含一个包含三个单词的span。

<div id="something" href="#something">
<span>Some mysterious text</span>
</div>

现在它们显示为：

有些神秘

文本

我想要的是：

部分

神秘的文字

换句话说，我希望文本（无论文本，不只是在我的三个单词示例中）首先填充宽度，然后向上移动。这是fiddle

Answer 1

只需使用br tag：

<span>Some <br />mysterious text</span>

或者，您可以使用span的宽度：

#something span{
    display: inline-block;
    width: 100px;
}

demo

Answer 2

或使用＆lt; br /＆gt;，就像@ C-link尼泊尔答案一样，或者更改div的宽度。

95px会没事的

Answer 3

在<span>中添加一些内联属性并将其设为block会有所帮助。像这样的东西

<div id="something" href="#something">
    <span><b>Some</b> mysterious text</span>
</div>

<强>风格

span>b{
    font-weight: inherit;
    display: block;
}

<强> DEMO

Answer 4

“换句话说，我希望文本首先填写底线”

疯狂的想法：如果您可以确定在包装文本并将其扩展到第二行之前可以适应该跨度的空白字符数，您可以编写一个javascript代码将文本附加到此集的末尾在填充跨度时删除它们，然后以自下而上的方式填充该区域。

找到类似的东西可以帮助你： jquery/css wrap text bottom up