チョコパイを240こ食べたエンジニア

PHPエンジニアをやった後、現在はフロントエンドエンジニアに・・。好物は『チョコパイと焼き鳥』。Twitterは@chooringo(ちょうりんご)

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

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

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

word-break: break-all;


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

word-wrap: break-word;

word-wrapのプロパティ

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