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

Geben Sie hier die Bildbeschreibung ein

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.

html css google-chrome whitespace 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

Antworten:

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