css列與白色空間nowrap不按預期方式工作

Question

在容器上使用css列時，它在此情況下顯示爲2列。我將它設置爲自動，以使其感到寬度，然後在需要時斷開。

爲了使所有的字符在同一行我使用nowrap。這是意外出現的地方。它不會破壞色譜柱，而是溢出下一列。

• 這是瀏覽器的bug嗎？
• 它可以固定沒有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第一個值應該是列計數，第二個值應該是列寬度，但這也不能解決此問題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; 
}