知らないということは、怖いことですね（笑）実は、この間、記事の中で、ちょっと長めのURLを載せたのですが、自分のサイトをふと見たら、そのURLが改行せずに、横幅を超えて続いていました。
私は、URLも普通の文字と同じように自動で改行してくれるものだと、思い込んでいたので、ちょっとあせりました（笑）
スマートフォン表示を見てみると、なんとデザインまでおかしくなっていました(^_^.)
ということで、今回は、長いURLや英数字が、自動で改行する方法を調べて試してみました。私のようなCSS初心者にもできる方法を行ってみました。
目次
長いURLや英数字が自動改行しない
長いURLや英数字をそのままブログに書くと枠からはみ出ても改行してくれません。
以下のようになります。
●PCで見た画面
●モバイル側の画面（クロームのスマホ表示画面）
ここまで長いURLや英数字だとモバイル側だとかなりデザインが崩れます。
CSSの初心者としては具体的にどこにコードを書き込むのか詳しく教えて欲しい！
URLの自動改行について書いてあるサイトはたくさんあったのですが・・・
なんとか長いURLや英数字が自動改行するように、まずは、ネットで調べました。
しかし、なかなかCSS初心者にわかりやすく説明しているサイトを見つけることができませんでした。
具体的にどういうことかというと、自動改行する指示コードは、書いてくれているのですが、中途半端にしか書かれていなかったり、そのコードを具体的にどこに記入したらいいのかがわからないんですよね(^_^.)
私は、ワードプレスを使ってブログを書いていますが、CSSのコードを書く場所といって思い当たる場所といえば、外観→テーマの編集でCSSを追加することぐらいです。
ということで、いくつかの指示コードをテーマの編集欄（スタイルシートの書き込み場所）に書き込んでみましたが、何度やってもURLが自動改行されません・・・
なぜだろう？書かれている通りにやっているはずなのに・・・
どこかが、間違っているんでしょうね。
これは、お手上げだなと思っていたのですが、なんとか、初心者にわかりやすく書かれているサイトを発見して問題が解決しました。
すると、その方のサイトやその他の方のサイトを読んで、URLや英数字の自動改行に関して重要なことがいくつかわかりました。
単純にURLや英数字を自動改行する指示コードを使うのは、おすすめできない場合もあるらしい
それほどCSSに詳しくない私は、ただ、自動改行するコードを書き込んで、それで終わりだなと思っていたのですが、実は、そうでは、ないようです！
word-wrap: break-wordを使う方法
多くのサイトで紹介されていた方法ですが、実はこの方法を使うと長いURLや英数字が、すべての箇所で自動で改行してくれますが、英単語の途中で改行されてしまうことがあり、かえってユーザーにわかりにくい場合もあるそうです。
なるほど、そういう理由で、私が使っているワードプレスのテーマでは、あえて、URLの自動改行がされないようになっているようです。
さすがに考えられていますね(^^♪
指定した場所だけ長いURLや英数字を自動改行するには？
word-wrap: break-wordを使えば、それだけで、すべての箇所で長いURLや英数字が自動改行されるようになります。
しかし、先ほど説明したように、それだと不便な場合もあるようです。
それでは、どうしたらいいのか？
悩んだ結果、それなら、自分が指定した場所だけ長いURLや英数字が自動改行するようにできればいいのでは？と考えました。
まあ、長いURLや英数字を書くときに、その度に設定しなければなりませんが、そのほうが、安全なのかなと思いました。
というわけで、その方法を色々探してやっと見つけました。
CSS側のコードとHTML側のコードの２つを入力する必要が有ります。
CSS側
ワードプレスの場合
管理画面→外観→テーマの編集画面に書き込みます。
CSSの編集をする場合は、子テーマで行ったほうがよいです。
（子テーマがある場合）
.kaigyou {
word-wrap: break-word;
}
HTML側
ワードプレスの場合
記事の投稿画面を開いて設置したい場所に、テキストモードにしてから以下のコードを書き込みます。
※書き込む場所は、→「ここにURLや英数字を書き込みます」の場所に書き込みます。
<p class="kaigyou">ここにURLや英数字を書き込みます</p>
すると私の場合、PC側でもモバイル側でもちゃんとURLや英数字が自動で改行されるようになりました。
※もちろんCSS側とHTML側のkaigyouは、好きな英数字で問題ありません。
そのかわり両方同じ英数字にしなければいけません。
もし上記のコードを打ち込んでも、ちゃんと改行されない場合は、パソコンのキーボードのctrl（コントロールキー）とF5キーを同時に押してキャッシュをリフレッシュさせてみて下さい。
改善後！
●PC側の画面
ちゃんと改行されました。わざと一番下だけ対策をしないでそのまま書きました。
そのためこの部分だけ改行されていません。
つまり指定した場所だけ改行できるということです。
●モバイル側の画面（クロームのスマホ表示画面）
ちゃんと改行されました。見やすいように、改行させたものだけの画像です。
参考にさせていただいたサイト
URLテキストなど英数文字を自動改行で表示させる方法
https://www.webmaster-guide.com/word-wrap/
わかりやすい説明で、助かりました。本当にありがとうございました。m(__)m
スマートフォンのデザインが崩れる場合、ひょっとするとURLがうまく改行されていないのかも？
う～ん、今思えば、以前から不思議なことはあったんです。
何かと言うと、クロームのブラウザは、大変便利で、PCで、スマートフォンで見た画面を簡単に再現できます。
その機能を使って、記事を書き終えたときに、パソコンとクロームのスマホ表示画面でちゃんと表示されているか？一応確認するのですが、スマートフォン表示にすると画面が左よりになっていることが、今まで多々あったんです。
下の画像は、わざと違うサイトで長いURLを書き込んでみたものです。
余白ができています。
※本来は、赤枠で収まらなければいけないのですが、長い英数字やURLが改行されないと、上記のように余白が出来てしまうこともあるようですね。
なぜなのかなといつも疑問に思っていましたが、そのままにしてました（笑）
今やっとその原因がわかりました。
URLが自動改行されていないので、長いURLが飛びぬけてスマートフォン表示で見ると左側に寄った画面になっていたようです。
謎がとけました（笑）
さあ、時間のあるときに、このサイトも含めて他のサイトも手直しをしなければいけません。
かなりの作業になりますが、頑張ります（笑）
とにかく解決してよかったです！