Problème avec «white-space: nowrap» sur Chrome 78.0.3904.70

10

Depuis la sortie de Chrome v78.0.3904.70, je constate des problèmes d'utilisation  avec la propriété CSS white-space: nowrap;. L'espace insécable semble provoquer un saut de ligne. Lors de l'utilisation text-overflow: ellipsis, le texte réel ne s'affichera pas car il est cassé à l'extérieur du conteneur. Apparemment, cela ne se produit que si le texte est trop long à afficher.

.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>

Développer l'extrait

Cela cause quelques problèmes d'affichage sur nos applications. Est-ce un bug ou y a-t-il un problème avec mon code?

Ce code est rendu dans React 16.

— Lucas Blackhurst
source

Chrome 78.0.3904.87 est sorti, je ne peux pas reproduire le problème avec lui (essayé votre extrait de code). Pouvez-vous essayer de me le faire savoir?

— Syed Aqeel Ashiq

4

Cela sera corrigé dans la version de M79 du 10 décembre 2019 comme référencé ici:

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

— Lucas Blackhurst
source

1

Vous pouvez supprimer "nbsp;" et utilisez une marge ou un rembourrage, cela fonctionnera bien.

Le bogue est déjà signalé https://bugs.chromium.org/p/chromium/issues/detail?id=1017465

— Divyesh Rupawala
source

Merci d'avoir référencé le bug signalé. Je souhaite que ce soit aussi simple que de simplement supprimer le & nbsp; mais cela se produit dans des systèmes en direct qui ne peuvent pas être simplement modifiés sans passer par des processus de publication stricts.

— Lucas Blackhurst