UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【CSS】white-spaceをつかって改行をなくすと間にスペースがはいる

ある改行を含む文章をpタグなどで囲って表示すると間にスペースがはいる

<p>
Windows でコン
ピュータの世界
が広がります。
</p>

Windows でコン ピュータの世界 が広がります。

変なところで改行しているデータの方がおかしいのはそれとして、この空白を置換なしになくすことはどうにかできないか調べた

ブラウザが実装していないので実質できない

調査した結果、空白をいれるかどうかは言語圏によるのでUAでそのルールを判断すべしとある

Then any remaining segment break is either transformed into a space (U+0020) or removed depending on the context before and after the break. The rules for this operation are UA-defined in this level.

https://www.w3.org/TR/css-text-3/#line-break-transform

英語などは空白は必要だが、日本語や中国語などは不要なので、一律空白をいれないでその辺の違いをちゃんとケアしようねと書いてある

しかし、これを実装するのはブラウザ側のためブラウザによって挙動が違う

手元で調査した結果、IE11, Chrome89, Safari12.1.2 は対応されていないが、FireFox86 は対応されていた

CSSではどうにもできないので、改行が空白になるのはいまのところブラウザの仕様というしかないみたい

つまるところ、変なところで改行入れないでねというしかない