このテーマ、何も自分で設定してないのにカテゴリがいくつか出てきたり、ソーシャルカウントがそれっぽく配置されたり、豪華ですね!
さて。
「/wp-content/themes/wp_material」ディレクトリにある「style.css」の、699行目辺りから、記事中のblockquoteの設定があります。
.content blockquote{
width: 90%;
margin: 0 auto 2em;
font-size: 0.9em;
line-height:1.5;
background-image: url(images/blockquote.png);
background-repeat: no-repeat;
background-position: left top;
background-color: #eef;
padding: 30px 20px 1px;
}
「{」がある行から「}」がある行までのどこかに、
word-wrap: break-word;
を1行、追加してみてはいかがでしょうか。
突き抜けてるのが気になるのであれば、「はみ出した部分は表示しない」方法もあります。
overflow: hidden;
PCでしか確認していませんが、スマホも共通だと思います。
特定の「テーマ」については、「テーマ」のフォーラムが良かったかも知れません。
あと、「カスタマイズ用子テーマ」が用意されているので、そちらをインストールした上で、「/wp-content/themes/wp_material_child」の「style.css」を開いて、18~27行目くらいの余白のところに、
.content blockquote {
word-wrap: break-word;
}
という行を追加するのが良いと思いました。
回答ありがとうございます
どちらも試したんですが、変化ないみたいです・・・
こんにちは、
body{
word-wrap: break-word!important;
word-break: break-all!important;
}
でテストして、OKなら
body{
word-wrap: break-word;
word-break: break-all;
}
再テスト、これでうまくいかなければ、スタイルシートで、word-wrap、word-break
が使われていないかチェックしてみるといいと思います。
nobitaさん、このbodyっていうのはスタイルシートの
どの辺りに入れればいいですか?
サイトURLが分かれば、適用されていそうかどうか分かると思いますが、ノーヒントだとこれ以上はボクではちょっと厳しいかも知れません。
PCで見ても同じように幅を縮めてもはみだして、上記の対応をしても変わらない感じでしょうか。
こちらのテスト環境でテーマをいれたところ上手くいっているように見えました。
そもそもおっしゃってる「マテリアル」というテーマがボクが見ているのと同じなのかな…。
最後でいいです
おまけ
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
も、追加しておくといいかも
ブラウザサポート
http://caniuse.com/#search=hyphens
もし、うまく適用できないときには、
長いリンクテキストに &shy;(&は、半角に読み替え ソフトハイフンと一般に呼ばれています)又は、<wbr />
を挟んでおくと、その部分で改行されます
poporonさん
nobitaさんありがとうございます
PCで見ると改行出来ました!!
ただスマホで見るとまだはみ出しているみたいです
見ている環境のせいかもしれません
サイトURLは「http://jet-news.com/」の
「2万年に一人の美少女」という記事の引用箇所に
書いたURLがはみ出しています
「Android 4.2」の「Chrome 45.0.2454.94」および「ブラウザ」で見たところ、ちゃんと改行されていました。
参考までに。