我有一個div
已應用text-align: center
。它應該能夠包含可能或不可能包裝的各種文本。當包裹,我想有每行大致相同的長度,所以它會顯示:用CSS將文本分成偶數行長度
敏捷的棕色狐狸懶狗跳
。
代替:
敏捷的棕色狐狸跳過懶惰
狗。
基本上,我正在尋找一種純粹的CSS方式來自動將中斷放在文本的中心附近。
我知道有JavaScript解決方案,目前我已經實現了一個服務器端解決方案,但我總是試圖學習更多的CSS,以使事情在將來變得更加靈活。
我有一個div
已應用text-align: center
。它應該能夠包含可能或不可能包裝的各種文本。當包裹,我想有每行大致相同的長度,所以它會顯示:用CSS將文本分成偶數行長度
敏捷的棕色狐狸懶狗跳
。
代替:
敏捷的棕色狐狸跳過懶惰
狗。
基本上,我正在尋找一種純粹的CSS方式來自動將中斷放在文本的中心附近。
我知道有JavaScript解決方案,目前我已經實現了一個服務器端解決方案,但我總是試圖學習更多的CSS,以使事情在將來變得更加靈活。
如果您減少div的寬度會怎麼樣?否則,我不確定你可以用CSS做到這一點
我很確定你不能用css做到這一點,但你可以用html控制沒有斷點。
<nobr>The quick brown fox jumps</nobr><nobr>over the lazy dog.</nobr>
應該給你想要的結果。 你也可以在你不想包裝的單詞之間插入
,例如:The quick brown fox jump over the lazy dog.
會給你同樣的結果。
把你所不希望在span
標記,禁止包裝打破:
<span style="white-space: nowrap">The quick brown fox jumps</span>
<span style="white-space: nowrap">over the lazy dog.</span>
(我知道這是老了,但我只是去尋找這個。)
你需要什麼要做的是測量文本長度,然後插入
或更改父容器的寬度。 CSS無法衡量事物或進行比較。我相信JS或服務器端是你唯一的選擇。 – 2012-03-26 15:47:05