半角文字が改行されてしまう

Question

全角文字から半角文字を続けて入力すると改行されてしまいます。

textarea で cols="30" と指定しています。

例えば、

ああああああああああああaaaaaaaaa

が最大の横幅となります。ここで「a」を続けて入力すると

ああああああああああああ
aaaaaaaaaa

このように半角の部分が全部改行されてしまいます。

また cols="30" と指定しているのに、1行当たり、半角で31文字、全角で17文字になっています。これはなぜでしょうか？

textarea に限らず input type="text" でも同様の現象が起きます。

input type="text" の場合は入力欄は1行なので、入力中はわかりませんが、
「ああああああああああaaaaa」と入力して結果を出力すると

ああああああああああ
aaaaa

のように改行されてしまいます。

input type="text" の結果が改行されてしまうのはスマホだけです。
textareaはPCでもスマホでも入力中に改行がされます。

スマホには

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, user-scalable=no">

を適用させています。

出力で半角文字が横幅を超えてしまわないように

word-wrap: break-word;

の設定もしています。

質問をまとめると

(1) 全角文字の後の半角文字がまとめて改行されないようにするにはどうすればよいのか

(2) cols="30" を反映させるにはどうすればよいのか

回答いただけると幸いです。よろしくお願いします。

Answer 1

  word-break: break-all;

では出来ませんか？