2012-03-26 36 views
4

我有一個div已應用text-align: center。它應該能夠包含可能或不可能包裝的各種文本。當包裹,我想有每行大致相同的長度,所以它會顯示:用CSS將文本分成偶數行長度

敏捷的棕色狐狸懶狗跳

代替:

敏捷的棕色狐狸跳過懶惰

狗。

基本上,我正在尋找一種純粹的CSS方式來自動將中斷放在文本的中心附近。

我知道有JavaScript解決方案,目前我已經實現了一個服務器端解決方案,但我總是試圖學習更多的CSS,以使事情在將來變得更加靈活。

+1

你需要什麼要做的是測量文本長度,然後插入
或更改父容器的寬度。 CSS無法衡量事物或進行比較。我相信JS或服務器端是你唯一的選擇。 – 2012-03-26 15:47:05

回答

0

如果您減少div的寬度會怎麼樣?否則,我不確定你可以用CSS做到這一點

2

我很確定你不能用css做到這一點,但你可以用html控制沒有斷點。

<nobr>The quick brown fox jumps</nobr><nobr>over the lazy dog.</nobr> 

應該給你想要的結果。 你也可以在你不想包裝的單詞之間插入&nbsp;,例如:The&nbsp;quick&nbsp;brown&nbsp;fox&nbsp;jump over&nbsp;the&nbsp;lazy&nbsp;dog.會給你同樣的結果。

0

把你所不希望在span標記,禁止包裝打破:

<span style="white-space: nowrap">The quick brown fox jumps</span> 
<span style="white-space: nowrap">over the lazy dog.</span> 

(我知道這是老了,但我只是去尋找這個。)