CSS裡的white-space:nowrap怎麼使用

white-space:nowrap一般會在特殊情境下使用，今天我們來研究一下他的語法結構和預設參數，讓大家更熟悉的掌握white-space:nowrap

#DIV CSS white-space norma nowrap強迫同一行內顯示所有文字文字，讓所有文字內容中一排顯示不換行。

讓文字不自動換行，無論CSS寬度設定多少，所有文字都在一行內顯示。特別是標題列表，我們想一行只顯示一條標題內容，而有時寬度有限標題文字多了width(寬度)又有限，這樣會造成文字自動換行，這個時候我們可以使用white-space樣式讓他一排顯示不換行，當然我們為了隱藏超出的文字內容我們可以再加一個css overflow#:hidden樣式。

white-space語法與結構 

white-space語法：

white-space : normal nowrap 

white-space參數：

normal : 　預設處理方式

nowrap : 　強制在同一行內顯示所有文本，直到文本結束或遭遇br標籤物件才換行。建議使用white-space:nowrap強制不換行。

white-space說明：

white-space設定或擷取物件內文字顯示方式。通常我們使用於強制一行顯示內容

通常我們使用white-space:nowrap強製文字文字內容不換行，在物件內一行顯示完所有文字內容。

white-space實作案例

我設定2個物件盒子，一個設定強制同儕顯示文字內容。第二個設定強制同行顯示，但使用html br標籤觀察效果。為了white-space案例應用效果，我設定css寬度一定120px，css高度為60px,css行高 line-height為20px 。

1、css代碼

 

#2、html程式碼片段

內容將在一行內強制顯示完整

 

內容使用br換行
 

將會不被
換行顯示

 

white-space強制不換行與br強制換行CSS案例

white-space強制不換行與強制br標籤換行

日常我們為了讓文字內容在一行內顯示完，就算寬度不夠也不能換行，我們可以使用white-space樣式，但如果遇到了html br強制換行標籤，無論是設定white-space與否都會被
強制換行。

相關閱讀：

Div和CSS 該如何學習

css的position怎麼使用

CSS的min-width和max-width怎麼設定

以上是CSS裡的white-space:nowrap怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！