使用css，如何确保跨越边界？

Question

要显示博客帖子的标签，我有一个带有一堆跨度的div。我希望任何跨度始终显示在一行上（如果太长则可以使用省略号）。如何使用css启用它？

<div>
  <span class='tag'>math</span>
  <span class='tag'>physics</span>
  <span class='tag'>mathematical induction</span>
  <span class='tag'>theoretical physics</span>
</div 

我不希望跨度在mathematical和induction之间，或theoretical和physics之间中断。我的标签跨度具有造型，使它们分开：

.tag {
  background-color: #aaaaaa;
  padding: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  line-height: 400%;
  color: white;
}

Answer 1

CSS方法

white-space: nowrap

所以你的CSS看起来像

.tag {
  background-color: #aaaaaa;
  padding: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  line-height: 400%;
  color: white;
  white-space: nowrap;
}

使用不易碎空间

在用户端，您可以使用&nbsp。

为了更好的可读性，我总是更喜欢第一种方法。

Answer 2

这与CSS不太相关，您可以使用牢不可破的空格 。

例如：

<span class="tag">mathematical&nbsp;induction</span>