Masalah dengan "white-space: nowrap" di Chrome 78.0.3904.70

10

Sejak rilis Chrome v78.0.3904.70, saya melihat masalah dengan menggunakan  properti CSS white-space: nowrap;. Ruang tanpa putus tampaknya menyebabkan jeda baris. Saat menggunakan text-overflow: ellipsis, teks yang sebenarnya tidak akan ditampilkan karena rusak di luar wadah. Tampaknya hanya terjadi jika teks terlalu panjang untuk ditampilkan.

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

Luaskan cuplikan

Ini menyebabkan beberapa masalah tampilan pada aplikasi kami. Apakah ini bug atau ada yang salah dengan kode saya?

Kode ini sedang diterjemahkan dalam Bereaksi 16.

— Lucas Blackhurst
sumber

Chrome 78.0.3904.87 dirilis, saya tidak dapat mereproduksi masalah dengannya (mencoba cuplikan Anda). Bisakah Anda mencoba dan memberi tahu saya?

— Syed Aqeel Ashiq

4

Ini akan diperbaiki dalam rilis M79 pada 10 Desember 2019 sebagaimana dirujuk di sini:

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

— Lucas Blackhurst
sumber

1

Anda dapat menghapus "nbsp;" dan gunakan margin atau padding, itu akan berfungsi dengan baik.

Bug ini sudah dilaporkan https://bugs.chromium.org/p/chromium/issues/detail?id=1017465

— Divyesh Rupawala
sumber

Terima kasih telah merujuk bug yang dilaporkan. Saya berharap itu sesederhana hanya menghapus & nbsp; tetapi ini terjadi dalam sistem live yang tidak bisa diubah begitu saja tanpa melalui proses rilis yang ketat.

— Lucas Blackhurst