HTML跨度內容保持在同一行

好的。所以我有一個跨越整個div，每個跨度都有一個字或一些內部。該div適合多行，並具有固定的寬度。我需要跨度內容在同一行保持相同，不要中斷，以便跨度中的一個單詞位於第一個單詞上，而其餘單詞位於下一個單詞上。HTML跨度內容保持在同一行

讓我給你一個小例子。

HTML

<div> 
    <span>Hamburgers</span> 
    <span>Pizza and hotdogs</span> 
    <span>Milk and beer</span> 
    <span>Kids menu</span> 
</div>

CSS

div{ 
    text-align:center; 
    width:400px; 
} 
span{ 
    margin-right:10px; 
}

現在我正在尋找的結果是這樣的：

Hamburgers  Pizza and hotdogs 
    Milk and beer  Kids menu

但什麼可能發生的事情是這樣的：

Hamburgers  Pizza and hotdogs Milk 
      and beer  Kids menu

我嘗試設置white-space: no-wrap，但只是在一行上設置everthing。我有一種感覺，使用正確的方式是關鍵，但我還沒有做到。

我希望你明白我想要達到的目標以及我現在的位置。

來源

2015-12-09 Mihkel Allorg

white-space: nowrap;將阻止任何類型的換行。這聽起來像你想要在你的標題中使用非中斷空格 ，這將防止短語在中間環繞。例如：

<div> 
    <span>Hamburgers</span> 
    <span>Pizza&nbsp;and&nbsp;hotdogs</span> 
    <span>Milk&nbsp;and&nbsp;beer</span> 
    <span>Kids&nbsp;menu</span> 
</div>

注： 被稱爲HTML實體。它將像最終用戶的普通空格字符一樣呈現，但它告訴瀏覽器不允許將單詞分成多行。

來源

2015-12-09 22:48:41 Quantastical

這確實是正確的答案，我不能接受它。還有一點需要注意，我使用PHP創建了span元素。使用'str_replace（）'來替換普通空格和非空格空格，並且必須在跨度結束標記之後放置額外的空格，以便行可以從那裏打破。 –

看到這個參考：W3CSchools white-space reference

您可以使用CSS應用white-space: pre你的跨度。這將允許他們包裝在破線空白字符上，而不是其他空白字符。

div { 
 
    text-align: center; 
 
    width: 400px; 
 
    border: 1px solid red; 
 
} 
 
span { 
 
    margin-right: 10px; 
 
    white-space: pre; 
 
}

<div> 
 
    <span>Hamburgers</span> 
 
    <span>Pizza and hotdogs</span> 
 
    <span>Milk and beer</span> 
 
    <span>Kids menu</span> 
 
</div>

來源

2015-12-09 22:56:29 Brino

HTML跨度內容保持在同一行

回答

相關問題