我正在建立一個橫向主條目的菜單。相應的子菜單標題垂直顯示在每個子菜單的下方。現在，一些較長的菜單標題被包裹在幾行中。實際上,“子”UL的寬度相當于子菜單中最長的一個單詞，所有其他單詞都相應地換行。我沒有給和LI(既不是主菜單也不是子菜單)留出寬度。

所以我的問題是，如何避免斷線？也許我可以用& ampnbsp(無空格字符)，但是否有不同的方法來實現這一點？

你試過李的發型嗎

white-space: nowrap

？

添加以下CSS將防止該行斷開:

li {
   white-space: nowrap;
}

如果使用Bootstrap，可以使用實用工具css類text-nowrap。您可以在文檔的實用程序部分找到它。

<div style="width: 10px">
    <span class="text-nowrap">This line will not break, ever....!!!</span>
</div>

對于M K的回答，引導實用程序類text-nowrap在其周圍應用了空白:nowrap，這意味著該類中的任何文本都不會換行。這很有用，但在設計響應性代碼時也很痛苦。

如果您有一段不想斷開的文本，最好將它放在這個元素周圍，而不是父元素周圍:

<div class="container">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in odio
        <span class="text-nowrap">lobortis,</span>
        condimentum ipsum in, vulputate felis. 
    </p>
</div>