Question

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

要在同一行上创建所有字符，我使用nowrap。这是意外出现的地方。它没有强制破坏色谱柱，而是溢出下一列。

这是浏览器错误吗？
可以在没有js和固定宽度的情况下修复吗？

＆＃13;

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

＆＃13;

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

＆＃13;

https://jsfiddle.net/zb7qvdpz/

Answer 1

您可以在text-overflow: ellipsis元素上使用li。同样在columns: auto 2中，第一个值应该是列数，第二个值应该是列宽，但也不会修复此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>

Answer 2

如果你想避免溢出，还要确保你的文字没有包裹到多行：

使用此

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

具有white-space nowrap的css列无法按预期工作

2 个答案: