CSS-Spalten mit Leerzeichen funktionieren nicht wie erwartet

Question

Wenn CSS-Spalten in einem Container verwendet werden, werden in diesem Fall 2 Spalten angezeigt. Ich stelle es auf Auto ein, damit es die Breite fühlt und dann bei Bedarf bricht.

Um alle Zeichen in der gleichen Zeile zu machen, verwende ich nowrap. Hier erscheint das Unerwartete. Anstelle einer Kraftunterbrechung der Spalte überläuft sie die nächste Spalte.

• Ist das ein Browserfehler?
• Kann es ohne js und feste Breite repariert werden?

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

Sie text-overflow: ellipsis auf li Elemente nutzen könnten. Auch in columns: auto 2 sollte der erste Wert Spaltenanzahl und der zweite Spaltenbreite sein, aber das wird auch nicht behoben Fiddle.

Sie könnten auch Flexbox anstelle 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

Wenn Sie möchten, überfüllt zu vermeiden, aber auch sicherstellen, dass Ihr Text nicht mehr als eine Zeile umbrochen:

verwenden Sie diese

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