レスポンシブデザインにするとURLがはみ出てしまいます overflow-wrap:指定で解決したが。。。

Question

お世話になります。
ワードプレスのレスポンシブにした時のURLがはみ出る事象について質問させて頂きます。
どうぞ宜しくお願いいたします

対象サイトを作成しました。

http://waww.wp.xdomain.jp/sample-page/

まず上記サイトを確認頂いて、レスポンシブ(スマホかchrome検証いずれもOKです)にしてください。
以下写真の通りurlがレイアウトからはみ出てしまいます。

ためしたこと

そこでなにがわるいのかを自分なりに一生懸命に調べてみました。
その結果、chrome検証上で以下のようにoverflow-wrap:とword-wrap:を指定する事で
レイアウトがずれずにURLを折り返えす事ができました。

{
　　　overflow-wrap: break-word;
　　　word-wrap: break-word;
}

しかしこのテーマのどこでこの二行を指定すればいいのか悩んでいます。
他のテーマの事は考えず除外して頂いて結構です。

毎回URLを書く際にこのクラスを指定するわけにもいきませんので
bodyないに指定するべきなのか、どこのクラスに上記2行をcssで指定するべきなのか
またどのように記載すべきなのかわからない状態です。

できればURLだけではなくこのようにぴょーんとはみ出る文字はさせたくありません。
URLの入力は固定ページや投稿ページ両方様々な記事に使用します。

よろしくお願いいたします。

Answer 1

WordPressのダッシュボードから
外観-カスタマイズ-追加CSSに
*{overflow-wrap:break-word;}を入れてみてはどうでしょうか。

Comments

[退会済みユーザー]

回答ありがとうございます。
教えて頂いた設定だと全部のCSSに聞くという設定になると思います。
正直すこし設定する範囲として大きすぎる気がしています。
Bodyの中に指定する場合にはCSSのどのクラスに書くべきでしょうか？

また私の考えが違う場合ぜひご意見きかせてください。
ねこかわいいですね♡

[退会済みユーザー]

ちなみに設定したところ正常に稼働しました。

[dit.]

「できればURLだけではなくこのようにぴょーんとはみ出る文字はさせたくありません。」とあったのですべてに効かせてもいいのかと思いこの回答になりました。
メインコンテンツの部分であればmain .wrap{}か.single{}あたりかなと思います。

[退会済みユーザー]

すみません。そうですよね。
あくまで私は、ぴょーんとはみだす文字をレスポンシブにした時に出させたくありません。
それは固定ページも投稿ページもです。この場合は
main .wrap{}
.single{}
*{overflow-wrap:break-word;}
上記３つの上でどれが一番良いのでしょうか？
3番目で逆にデメリットがなければ３番目にしたいと思います。

一点質問ですが
word-wrap: break-word;　は不要なのでしょうか？
https://creive.me/archives/17653/

自分なりに調べると必要なのかなと思っていました。ご意見頂ければ幸いです。
ご丁寧な回答ありがとうございます。

[dit.]

*{}での指定は「とりあえず全部の要素に」効きます。
ヘッダーだろうがメインの部分であろうが、pでもdivでもaでも全部です。
「どこでどう指定してあるかわからんけどこのサイト上ではとにかくどんな文章もはみ出さず改行させる」という時ならいいと思います。
main .wrap{}、.single{}と書いたのは質問に提示のサイトをデベロッパーツールで確認し、コンテンツ部分だろうな～というところにあった指定を参考にしました。
main .wrap{overflow-wrap:break-word;}、.single{overflow-wrap:break-word;}とかの書き方になりますね。
word-wrap: break-word;を省略したのは必要なら質問者さんが入れるかな　と思っただけで他意はありません。
overflow-wrapプロパティは、word-wrapプロパティが改名されたもので、word-wrapは互換性のために残されているようです。旧いブラウザに対応させる場合には入れておいた方がいいかもしれません。

[退会済みユーザー]

ありがとうございます。

[退会済みユーザー]

追加質問がありますので別途スレを立てます。丁寧でわかりやすかったです。