2011-07-12 26 views
49

整條生產線或無我想保持一個文本行在一起,使得無論是整條生產線下落在所有保持一條線文本作爲單行 - 包裝在所有

線或無可接受

How do I wrap this line of text - asked by Peter 2 days ago 

可接受

How do I wrap this line of text 
- asked by Peter 2 days ago 

不交流ceptable

How do I wrap this line of text - asked by Peter 
2 days ago 

這是可以在CSS中實現嗎?代替空格等等;

// HTML: 

.nowrap { 
 
    white-space: nowrap ; 
 
}
<p> 
 
     <span class="nowrap">How do I wrap this line of text</span> 
 
     <span class="nowrap">- asked by Peter 2 days ago</span> 
 
    </p>

// CSS: 
.nowrap { 
    white-space: nowrap ; 
} 
+0

您的行如何以標記表示?你只是假設一個新行,因爲它包含一個連字符? – DoctorMick

+0

@DoctorMick - 沒有假設的換行符和標記是完全開放的任何東西 - @Gus的答案已爲我釘 - 但 –

回答

91

您可以使用white-space: nowrap;來定義這種行爲他們被迫留在一起。

How do I wrap this line of text 
-&nbsp;asked&nbsp;by&nbsp;Peter&nbsp;2&nbsp;days&nbsp;ago 
+0

工作的魅力,謝謝 –

+7

這效果很好,除非跨度內的文字量不能顯示在一行上,在這種情況下它被切斷。在小型/移動屏幕和響應式網站上進行思考。 –

1

你也可以把非中斷空格(&ampnbsp):

+0

正如Paul Hiles在上面指出的那樣,除非在一行中不能顯示文本的數量,否則文本被切斷。 –

+0

是的,這值得讚賞。 –

相關問題