带有空格 nowrap 的 css 列无法按预期工作答案

【问题标题】：css columns with white-space nowrap does not work as expected带有空格 nowrap 的 css 列无法按预期工作
【发布时间】：2017-09-19 08:49:12
【问题描述】：

在容器上使用 css 列时，在这种情况下显示为 2 列。我将其设置为自动以使其感觉到宽度，然后在需要时中断。

为了让所有字符在同一行，我使用 nowrap。这就是意外出现的地方。它不是强制破坏列，而是溢出下一列。

ul {
  outline: 1px solid red;
  max-width: 400px;
  columns: auto 2;
}

li {
  white-space: nowrap;
}

<ul>
  <li>A very long long long long long text</li>
  <li>A short text</li>
</ul>

【问题讨论】：

【解决方案1】：

您可以在li 元素上使用text-overflow: ellipsis。同样在columns: auto 2 中，第一个值应该是column-count，第二个应该是column-width，但这也不能解决这个Fiddle。

您也可以使用Flexbox 代替DEMO

ul {
  outline: 1px solid red;
  max-width: 400px;
  columns: auto 2;
}

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

<ul>
<li>A very long long long long long text</li>
<li>A short text</li>
</ul>

【讨论】：

【解决方案2】：

如果您想避免溢出，但还要确保您的文本不会换行超过一行：

使用这个

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

【讨论】：