質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

17649閲覧

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

Samonasu

総合スコア16

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/02/17 07:04

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

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

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

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

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

投稿2019/02/17 07:11

yu-smc

総合スコア610

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Samonasu

2019/02/17 07:26

迅速な回答ありがとうございます! overflow-wrap: anywhere 試してみましたが、折り返しされませんでした。 他の値「normal」「break-word」も試してみましたが効きませんでした… ブラウザをfirefoxバージョン65に変えて試しても、やはり効きませんでした… どういった原因が考えられるでしょうか?
yu-smc

2019/02/17 07:32

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

2019/02/17 07:46

いえいえ! テキストエリアにするには住所は情報量が少なすぎると判断してテキストフィールドを選びました。 収まりきらない場合があるなら、潔くテキストエリアに変えたほうがいいということですかね。 テキストフィールドは改行不可だということが改めて分かりました。 テキストエリアで実装してみようと思います。ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問