質問: テキストフィールドに入力してもらったものを、確認画面でreadonly属性を付与することで表示しています。(WordPressのContact Form 7を使って実装しています) しかし、住所のようにコンテンツ幅が長くなる可能性のあるものだと、スマートフォンで表示したときに画面幅に収まってくれません。 そこで、readonly属性のついたテキストボックスの中身を折り返しさせようと、下記のような指定をしてみました。 ``` input[type="text"] { word-wrap: break-word; word-break: break-all; } ``` しかし、テキストフィールドの中身は折り返しされませんでした。 もちろん、コンテンツ幅はテキストフィールドに収まっていない状態で試しています。 折り返しを含む場合はテキストエリアを使うしかないのでしょうか? テキストフィールドで折り返しが可能になる方法があれば教えていただきたいです。 (確認したブラウザはChromeバージョン72です)
回答: https://developer.mozilla.org/ja/docs/Web/CSS/overflow-wrap overflow-wrap: anywhere でどうでしょうか。 word基準でのwrapだと、日本語の文章は単語別で認識されないので効かないのです。