チョコパイを240こ食べたプログラマ

青森から大都会に出てきてPHPエンジニアとして修行中。CSSとかも。時々趣味の雑貨系も♡好物は『チョコパイ』。好きな関数は『var_dump』。Twitterは@chooringo(ちょうりんご)

Firefoxで改行されない問題をCSSで解決する方法

にわとり並みの記憶力の自分にささげるささやかなメモ。
すぐ忘れちゃうので…( ;∀;)

firefoxでinputとかtextareaとかの領域に文字を収めたいのに、半角英数字の長い文字列だと改行されず、
画面をはみ出し地球の果てまでいってしまう問題。
以下だけだと、firefoxでうまいこと表示できなかったので、

word-break: break-all;


以下のCSSを追加すると良いっ

word-wrap: break-word;

word-wrapのプロパティ

break-word ⇒ 単語の途中でも指定の領域で折り返す
normal   ⇒ 単語の途中で折り返させないので、単語の途中だったら領域からはみ出す