CODEWITHSUNDEEP
htmlcssgoogle-chromewhitespace
Lucas Blackhurst
Lucas Blackhurst

Reputation: 141

Issue with "white-space: nowrap" on Chrome 78.0.3904.70

Since the release of Chrome v78.0.3904.70, I am seeing issues with using   with the CSS property white-space: nowrap;. The non-breaking space seems to cause a line break. When using text-overflow: ellipsis, the actual text will not display as it is broken outside of the container. Only seems to happen if the text is too long to display.

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

enter image description here

It's causing a few display problems on our applications. Is this a bug or is there something wrong with my code?

This code is being rendered in React 16.

Upvotes: 9

Views: 2655

Answers (2)

Lucas Blackhurst
Lucas Blackhurst

Reputation: 141

This will be fixed in the release of M79 on December the 10th 2019 as referenced here:

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

Upvotes: 4

Divyesh Rupawala
Divyesh Rupawala

Reputation: 1221

You can remove "nbsp;" and use margin or padding, it will work fine.

The bug is already reported https://bugs.chromium.org/p/chromium/issues/detail?id=1017465

Upvotes: 1

Related Questions