I struggle to understand what's the expected behavior of overflow-wrap: break-word; when applied to a long sequence of whitespaces, and specifically Ideographic Space (U+3000).
So far I've actually tested on all kind of whitespaces (Unicode Category “Zs - Space Separator”). In Chrome, all of other whitespaces wrap except Ideographic Space. But in Safari, Ideographic Space also wraps like others. See demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Ideographic Space</title>
<style>
.container {
width: 2ch;
border: 1px solid blue;
overflow-wrap: break-word;
word-break: normal;
white-space: normal;
font-family: monospace;
}
span.text {
background-color: rgba(50, 10, 100, 0.15);
}
</style>
</head>
<body>
<div class="container">
<span class="text"
>     </span
>
</div>
<div class="container">
<span class="text"
>　　　　　</span
>
</div>
</body>
</html>I've gone through related CSS Specs, but fail to understand how to interpret it on this specific point. And since two popular browsers behave differently, I guess this could be a bug in one of them, I'm just not sure which (but intuitively, I guess Chrome is to blame).
I want to make Ideographic Space wrap like other whitespaces in Chrome, but I don't really want to use white-space: break-spaces, which does work, but it also comes with other undesired behaviors like preserving unwanted whitespaces.
Here's the svelte page I used to experiment on the problem.
Hope someone familiar with the subject can shed some light on it. Thanks.