ปัญหาเกี่ยวกับ“ พื้นที่สีขาว: nowrap” บน Chrome 78.0.3904.70

ตั้งแต่รุ่นของ Chrome v78.0.3904.70 ที่ผมเห็นปัญหาเกี่ยวกับการใช้กับสถานที่ให้บริการแบบ  CSS white-space: nowrap;พื้นที่ที่ไม่แตกดูเหมือนจะทำให้เกิดการแบ่งบรรทัด เมื่อใช้text-overflow: ellipsisข้อความจริงจะไม่ปรากฏเนื่องจากมีการแตกด้านนอกของคอนเทนเนอร์ ดูเหมือนว่าจะเกิดขึ้นหากข้อความยาวเกินกว่าจะแสดงได้

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

มันก่อให้เกิดปัญหาการแสดงผลสองสามประการเกี่ยวกับแอปพลิเคชันของเรา นี่เป็นข้อผิดพลาดหรือมีบางอย่างผิดปกติกับรหัสของฉันหรือไม่

รหัสนี้ถูกสร้างการแสดงผลใน React 16

สิ่งนี้จะได้รับการแก้ไขในการเปิดตัว M79 ในวันที่ 10 ธันวาคม 2562 ตามที่อ้างถึงที่นี่:

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

คุณสามารถลบ"nbsp;" และใช้มาร์จิ้นหรือแพ็ดดิ้งก็จะทำงานได้ดี

ข้อผิดพลาดได้รับการรายงานไปแล้วhttps://bugs.chromium.org/p/chromium/issues/detail?id=1017465