| Summary: | Line wrapping is incorrect when both ("overflow-wrap: break-word"/"word-break:break-word") and ("white-space: pre") are set | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Josh Brown <josh9051> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED CONFIGURATION CHANGED | ||
| Severity: | Normal | CC: | ahmad.saleem792, josh9051, mmaxfield, webkit-bug-importer, zalan |
| Priority: | P2 | Keywords: | InRadar |
| Version: | WebKit Nightly Build | ||
| Hardware: | All | ||
| OS: | All | ||
I am not able to reproduce this bug in Safari 16 and STP 154 and it matches in rendering with Chrome Canary 108 and Firefox Nightly 108 and does not wrap. I think it is progression from IFC work done by Alan. Marking this as "RESOLVED CONFIGURATION CHANGED". Please reopen, if it is reproducible with updated test case. Thanks! |
Line wrapping is incorrect when both ("overflow-wrap: break-word"/"word-break:break-word") and ("white-space: pre") are set. If you set "overflow-wrap: break-word" or "word-break:break-word" and "white-space: pre", the element will wrap. This is contrary to the spec: https://drafts.csswg.org/css-text-3/#propdef-overflow-wrap > This property specifies whether the UA may break at otherwise disallowed points within a line to prevent overflow, when an otherwise-unbreakable string is too long to fit within the line box. **It only has an effect when white-space allows wrapping**... See the example below: https://jsfiddle.net/nw30cvtu/ ``` <style> .wrapper { width: 100px; border: 2px solid black; } * { word-break: break-word; } .el { white-space: pre; } </style> <div class="wrapper"> <span class="el">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span> </div> ``` Both chrome and firefox follow the spec correctly and don't wrap.