禁則処理を禁止し、行頭に句点（。）や読点（、）が来てもいいようにしたい

Question

<textarea>内でのことなのですが ```CSS textarea { word-break: break-all; line-break: loose; width: 5em; } ``` > あいうえお 。きくけこ さしすせそ ↑のように、もしくは > あいうえお。 きくけこさ しすせそ ↑のようにしたいのに > あいうえ お。きくけ こさしすせ そ と禁則処理されてしまいます。 これを回避したいのですが 何か方法はないでしょうか？

Comments

[退会済みユーザー]

ほかの設定は試してみた？

[退会済みユーザー]

（ie以外対応されてたかどうかは記憶に薄い）

[ikedas]

teratailのスタイルシートとか参考にならないかな

[flc]

あ、IEみたいなレガシーブラウザはどうでもいいんで…
line-break: anywhere
というIE用プロパティも試してみましたが、案の定Chromeではダメっぽかったですね
line-breakはlooseが最もゆるいはずですが…

[flc]

少なくともteratailのこのテキストエリアではやはり禁則処理されてますね（Chromeから確認）

[yoshinavi]

「text-align:justify;」等は、どうですか？

[退会済みユーザー]

まあIE（11)でもだめっぽいな。

行末文字禁則処理（line-break）・・・・

※ 単語禁則処理（word-break) ではできるはずもない

[flc]

text-align:justify;
でもやはり前の行の最後の文字（お）が次行に引っ張ってこられたうえで
前の行の文字間隔が広がって

あ い う え
お。きくけ
こさしすせ
そ

ってなるだけですね…

Answer 1

CSS Text Level3 で約物のぶら下がり（次行に移らず末尾にくっつける）コントロールは hanging-punctuation によって行われるとされています。
https://triple-underscore.github.io/css-text-ja.html#word-break-property

ただしこのプロパティが適用されるのは行内ボックスのみなので、textarea の中の部分に適用する術がないですね……無理矢理

textarea:first-child {
  display: inline-block;
  hanging-punctuation: none;
}

とかやってもうまく行かないようですし。
※さらに、このプロパティ自体、廃止の可能性が高いとされていて対応してくれているブラウザがどれだけあるものやら……