<input type="text">の入力内容を自動改行する方法

Question

テキストフィールドに入力してもらったものを、確認画面でreadonly属性を付与することで表示しています。（WordPressのContact Form 7を使って実装しています）
しかし、住所のようにコンテンツ幅が長くなる可能性のあるものだと、スマートフォンで表示したときに画面幅に収まってくれません。

そこで、readonly属性のついたテキストボックスの中身を折り返しさせようと、下記のような指定をしてみました。

input[type="text"] {
    word-wrap: break-word;
    word-break: break-all;
}

しかし、テキストフィールドの中身は折り返しされませんでした。
もちろん、コンテンツ幅はテキストフィールドに収まっていない状態で試しています。

折り返しを含む場合はテキストエリアを使うしかないのでしょうか？
テキストフィールドで折り返しが可能になる方法があれば教えていただきたいです。

（確認したブラウザはChromeバージョン72です）

Answer 1

https://developer.mozilla.org/ja/docs/Web/CSS/overflow-wrap

overflow-wrap: anywhere でどうでしょうか。

word基準でのwrapだと、日本語の文章は単語別で認識されないので効かないのです。

Comments

[Samonasu]

迅速な回答ありがとうございます！

overflow-wrap: anywhere　試してみましたが、折り返しされませんでした。
他の値「normal」「break-word」も試してみましたが効きませんでした…
ブラウザをfirefoxバージョン65に変えて試しても、やはり効きませんでした…

どういった原因が考えられるでしょうか？

[yu-smc]

あ、すみません質問文をただしく理解していませんでした。
テキストボックスはそもそも１行しか入らないものなので、テキストエリアを使うのがいいと思います。
テキストエリアを使いたく無い理由等あるのでしょうか？

[Samonasu]

いえいえ！
テキストエリアにするには住所は情報量が少なすぎると判断してテキストフィールドを選びました。
収まりきらない場合があるなら、潔くテキストエリアに変えたほうがいいということですかね。

テキストフィールドは改行不可だということが改めて分かりました。
テキストエリアで実装してみようと思います。ありがとうございました！