如何使用CSS防止列表項中的換行符

Question

我試圖放置一個名爲的鏈接使用li標記在菜單中提交簡歷。由於兩個單詞之間的空格，它會包裝成兩行。如何防止用CSS包裝？

Answer 1

使用white-space: nowrap;¹，或給該鏈接由li的寬度設置爲更大的值的更多的空間。

Answer 2

如果你想選擇實現這一目標（即：只對特定的鏈接），你可以使用非打破空間，而不是一個正常的空間：

<li>submit&nbsp;resume</li> 

http://en.wikipedia.org/wiki/Wikipedia:Line-break_handling#.26nbsp.3B

編輯：我知道這是HTML，而不是OP所要求的CSS，但有些人可能會發現它很有用...

Answer 3

您可以添加這段小小的代碼，在行尾添加一個不錯的「...」如果內容我s以大到適合一條線：

li { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 

Answer 4

display：inline-block;將阻止換行列表項

http://jsfiddle.net/Nash171/mwe4s0nc/46/

li{ 
    display: inline-block; 
}