Problem mit "Leerzeichen: Nowrap" in Chrome 78.0.3904.70

10

Seit der Veröffentlichung von Chrome v78.0.3904.70 treten Probleme bei der Verwendung  der CSS-Eigenschaft auf white-space: nowrap;. Der nicht unterbrechende Raum scheint einen Zeilenumbruch zu verursachen. Bei Verwendung text-overflow: ellipsiswird der tatsächliche Text nicht angezeigt, da er außerhalb des Containers unterbrochen ist. Scheint nur zu passieren, wenn der Text zu lang ist, um angezeigt zu werden.

.box-inline {
    max-width: 120px;
    overflow: hidden;
    height: 16px;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
}

<div class="mar-rgt box-inline text-sm"><span class="label" style="background: rgb(176, 223, 246);"></span>&nbsp;Not meeting expecations</div>

Erweitern Sie das Snippet

Es verursacht einige Anzeigeprobleme in unseren Anwendungen. Ist das ein Fehler oder stimmt etwas mit meinem Code nicht?

Dieser Code wird in React 16 gerendert.

— Lucas Blackhurst
quelle

Chrome 78.0.3904.87 ist veröffentlicht, ich kann das Problem damit nicht reproduzieren (habe dein Snippet ausprobiert). Können Sie versuchen, mich zu informieren?

— Syed Aqeel Ashiq

4

Dies wird in der Veröffentlichung von M79 am 10. Dezember 2019 behoben, auf die hier Bezug genommen wird:

https://bugs.chromium.org/p/chromium/issues/detail?id=1017465

— Lucas Blackhurst
quelle

1

Sie können "nbsp;" und verwenden Sie Rand oder Polsterung, es wird gut funktionieren.

Der Fehler wurde bereits unter https://bugs.chromium.org/p/chromium/issues/detail?id=1017465 gemeldet

— Divyesh Rupawala
quelle

Vielen Dank, dass Sie auf den gemeldeten Fehler verwiesen haben. Ich wünschte, es wäre so einfach wie das Entfernen der & nbsp; Dies tritt jedoch in Live-Systemen auf, die nicht einfach geändert werden können, ohne strenge Freigabeprozesse zu durchlaufen.

— Lucas Blackhurst