valueの文字は、文字列の折り返し(css:word-wrap)が効かないのか

Question

wordpressでホームページを制作しています。
ボタンを押すと次の画面のフォームに自動的に文字が入るものを実装しました。
valueで表示されている文字列がスマホで閲覧したときに画面端から切れてしまうので
文字列の折り返し表示をするcssを指定しましたが折り返し表示されません。
↓

/* 文字列の折り返し */
word-wrap: break-word;

<div class="form_title">
  <span>
    <input type="text" value="ここに文字列が表示されます。押すボタンによって長さは様々です。" >
  </span>
</div>

valueで表示されている文字はcssで文字列の折り返しを指定できないものなのでしょうか？
その場合はどのように指定するのが正解でしょうか…？
教えていただけると嬉しいです、宜しくお願い致します。

Comments

[maisumakun]

「valueで表示されている文字」とありますが、どのようなエレメントに表示していますか？

[satoshickkk]

質問文に追加させて頂きました、宜しくお願い致します。

Answer 1

その場合はどのように指定するのが正解でしょうか…？

どうしようもありません。<input type="text">は1行用の入力ボックスなので、はみ出した分は枠の外に出るだけで、折返し表示にはなりません。

枠の中で折り返したいのであれば、複数行入力できる<teaxtarea>を使うしかないかと思います。

Comments

[satoshickkk]

ありがとうございます。
<teaxtarea>を使用して折り返し表示しようと思います。