Question

好。所以我有一个充满跨度的div，每个跨度都有一个或几个内部。 div适合多行并具有固定宽度。我需要跨度内容在同一行保持相同，不要断开，以便跨度中的一个单词在第一个上，其余单词在下一个上。

让我举个小例子。

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。我觉得以正确的方式使用white-space: no-wrap是关键，但我还没有达到目的。

我希望你明白我想要实现的目标和我现在所处的位置。

Answer 1

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实体。它将像最终用户的常规空格字符一样呈现，但它告诉浏览器不允许将单词分成多行。

Answer 2

请参阅此参考：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>

HTML span内容保持在同一行

2 个答案: