2014-09-04 95 views
2

也許這不是最好的標題,所以這裏是一個例子: 一個固定寬度的div包含三個詞的跨度。從下往上排列多行文本

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

現在,他們表現爲:

有些神祕

文本

我要的是:

一些

神祕的文字

換句話說,我希望文本(不論是文本,不僅僅在我的三個詞的例子中)填充從底部開始的寬度,然後向上移動。這裏是​​

+0

如果有將是唯一的3個字出現,然後用一個簡單的''
的第一個字後。 – 2014-09-04 10:34:24

+0

更改/減少div的寬度是最優雅的解決方案。 – rnevius 2014-09-04 10:35:55

+0

@mevius,在我的情況下,寬度是,應該是固定的。 – 2014-09-04 10:38:16

回答

1

只需使用br tag

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

或者,你可以使用寬度爲跨度:

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

demo

+0

正確,但我想要更通用的東西。我想要我放置的任何文本,先從底線開始填充寬度,然後向上移動。 – 2014-09-04 10:35:42

+0

檢查更新的答案然後.. – 2014-09-04 10:37:45

+0

@ C-link尼泊爾:演示似乎沒有工作,嘗試用「abcdefg」替換神祕的詞例如... – 2014-09-04 10:56:36

1

或者使用< BR />,像@ C-link尼泊爾的答案,或者你改變div的寬度。

95px將被罰款

0

添加一些內聯屬性您<span>內,使其block會有所幫助。事情是這樣的

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

風格

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

DEMO

0

「換句話說,我希望文本第一填補了底線」

瘋狂的想法:如果您可以確定您可以適應多少空白字符bef如果它包裝文本並將其展開到第二行,則可以編寫一段JavaScript代碼將文本附加到該組字符的末尾,並在填充範圍時將其刪除,然後將填充區域放在底部 - 最後一種方式。

類似找到東西,可以幫助你在這裏: jquery/css wrap text bottom up