Q&AWordpressのTwenty Seventeenテーマを使っています。
下記の様なCSSとHTMLの個別投稿で記事を投稿すると本文が要素内で折り返されず、要素を飛び越えて表示されてしまいます。
要素に収まるようにするにはどうしたらいいでしょうか？
本文をエディタ上で改行せずに長く書きすぎると画像のようにおかしくなってしまいます。
本文を短くしたりエディタで改行すると要素が中央に寄ってくれます。
画像も少し要素からはみ出ます。
<?php /* Start the Loop */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/post/content', get_post_format() ); // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) : comments_template(); endif; endwhile; // End of the loop. ?> </section> <!-- sub_box_single -->
<CSS> ```ここに言語を入力 #sub_box_single { text-decoration: none; width:100%; display: flex; /* 子要素をflexboxで揃える */ justify-content: center; /* 子要素をflexboxにより中央に配置する */ } #sub_box_single .entry-meta { padding-bottom:0; text-decoration:none; } #sub_box_single .entry-meta a { pointer-events: none; } #sub_box_single time { font-size:120%; font-weight:100; color:#fff; } #sub_box_single .entry-content { margin-left:3%; margin-right:3%; } #sub_box_single .entry-header { display:inline-block; padding-top:10px; padding-bottom:10px; padding-right:10%; max-width:100%; padding-left:3%; font-size:2vw; background:linear-gradient(315deg, transparent 35px, #47A095 10px); background-position: bottom left, bottom right, top right, top left; background-repeat: no-repeat; margin-bottom:20px; } #sub_box_single .entry-title { color:#fff; } #sub_box .entry-header { display: -webkit-flex; display: flex; } .post-odd { padding-top:15px; padding-left:20px; } .post-even { padding-top:15px; border-top: 1px dotted #000; border-bottom: 1px dotted #000; background:#f7f7f7; padding-left:20px; }
クロームの検証機能で確認した所、以下のようなコードで表示されていました。
折返しを阻むようなタグもCSSもありませんでした。
<div class="entry-content"> <p><img class="alignnone size-large wp-image-7" src="http://XXXX.com/news/wp-content/uploads/2018/06/coffee-1024x614.jpg" alt="" width="525" height="315" srcset="http://XXXX.com/news/wp-content/uploads/2018/06/coffee-1024x614.jpg 1024w, http://XXXX.com/news/wp-content/uploads/2018/06/coffee-300x180.jpg 300w, http://XXXX.com/news/wp-content/uploads/2018/06/coffee-768x461.jpg 768w" sizes="(max-width: 525px) 100vw, 525px" /></p> <p>88888888888888888888888888888888888888888888888888888888888888888</p><p>88888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888</p> </div><!-- .entry-content -->
回答2件
0
単語の途中で改行を入れるかどうかを指定する overflow-wrap を適用してみてください。
もし効かないなら word-break も試してみてください。
.entry-content { word-wrap: break-word; /*改名前のプロパティも一応セット*/ overflow-wrap: break-word; /*word-break: break-all;*/ }
投稿2018/07/08 00:07
総合スコア784
0
ベストアンサー
.entry-content { width:73%; }
これで改行されるようになりました。
投稿2018/07/09 06:51
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/07/09 06:50