html - 带有空白 nowrap 的 css 列不能按预期工作

Question

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

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

• 这是浏览器错误吗？
• 可以不用js固定宽度吗？

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>

https://jsfiddle.net/zb7qvdpz/

Answer 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>