投稿記事を横並びにするために500px以上あったらdivを追加したい。

WordPressの投稿記事を横スクロールにしたいという依頼がありました。
しかし、コンテンツ制作者にはタグの知識がないため、最初からブロック要素を追記してもらうのが難しいため、横並びにする方法で頭を抱えています。

html
1<!-- こうなってるものを -->
2<div class="post-content">
3<p>どのタグで書くかわからない記事...</p>
4<p>うわーっと3000文字くらい</p>
5<p>どのタグで書くかわからない記事...</p>
6<p>うわーっと3000文字くらい</p>
7省略
8</div>
9
10<!-- こうしたい -->
11<div class="post-content">
12<div class="wrap"> ←追加
13<p>どのタグで書くかわからない記事...</p>
14<p>うわーっと3000文字くらい</p>
15</div> ←追加
16<div class="wrap"> ←追加
17<p>どのタグで書くかわからない記事...</p>
18<p>うわーっと3000文字くらい</p>
19省略
20</div> ←追加
21
22</div>

こうなればCSSでfloatなりflexboxなりで横並びは可能だと思っていますが、肝心のスクリプトの書き方がわかりません。
500px以上テキストが合った場合、divで囲いたいのです。

イメージしているCSS例

css
1.post-content{
2    display:flex;
3     }
4.post-content wrap{
5    width:300px;
6}

試して挫折したスクリプト ↓

js
1<script>
2$(function(){
3    var containerDiv = $('.post-content');
4while(containerDiv.height() > 500){ //500
5    console.log("500まだあるよ");
6    $('.post-content').wrapAll('<div class="wrap">');
7}
8});
9</script>

これだと全くダメに500pxから脱却しないのでひたすらローディングしっぱなしになってしまいます。さらにこのままだとwrapがついたとしても次の要素にもwrapを追加することができません。

どのような方法があるのか教えていただけないでしょうか？

Lhankor_Mhy

2021/01/10 13:04

「全くダメに500pxから脱却しないのでエラーを吐き続けています」とのことですが、エラーメッセージをご提示ください。

Lhankor_Mhy

2021/01/10 13:13 編集

.entry-container がHTMLに存在しないようですが、これは .post-content の間違いですか？

M.Takeshita

2021/01/10 13:41

ご指摘いただいたところ、修正しました！ありがとうございます！エラーに関しては、エラーというか、処理が終わらず、ずっと画面が読み込めないという感じです。

Lhankor_Mhy

2021/01/10 14:37 編集

「こうなればCSSでfloatなりflexboxなりで横並びは可能だと思っています」とのことですが、実際にお試しになりましたか？ floatであれば親要素をオーバーフローしないため横スクロールが発生せず、 flexであれば、ラップしていないp要素が単独で横並びになってしまうと思うのですが、どのようなCSSを想定されているのか、ご提示いただけますか？

M.Takeshita

2021/01/10 14:34

はい。ご指摘の通り、現状の状態ではラップができず、横並びにできません。 javascriptに関しましても、記載したものでは処理が不完全なのは理解しております。 flexboxなどで横並びにさせるための記述方法があれば、考え方などヒントをいただきたいのです。

Lhankor_Mhy

2021/01/10 14:37 編集

いえ、私が言いたいことは、要素をラップすることができたとして、その状態で横並びにするCSSをご提示いただきたい、ということです。

Lhankor_Mhy

2021/01/10 14:39

わかりにくいでしょうか？私が懸念しているのは、「がんばって要素をラップするスクリプトが書けたものの、そのHTMLでは横並びにできなかった」ということなのですが、「ラップさえできれば望む結果を手に入れることができる」というのは確定しているのでしょうか？

M.Takeshita

2021/01/10 14:42

はい。今イメージのcssを記載したのですが、多分、wrapからもれたpタグがあるという想定ですよね？その部分に関しても、処理できる方法があればと思っているのです。できるのかわからないのですが、 500px以下の場合、.wrapを追記する。のようはif文を追加する。。とかでしょうか？

M.Takeshita

2021/01/10 14:48

色々考えていただき、ありがとうございます。確定しているか？というと、確かにそれはまだわからないのですが、htmlやCSSの知識に比べて、jsの知識が低いため、jsでどこまでできて、どういった記述ができるのか？というところのヒントを探るべく、記載していますので、もし何か足りないものなどがあれば、今のようにご指摘いただけると幸いです。

Lhankor_Mhy

2021/01/10 14:57 編集

ご提示のCSSですと、要素をラップしようとしまいと横並びになると思うのですが…… どうも、やりたいことについて、私があまり理解できていないように感じます。ご提示のスクリプトを見ると、「.post-contentの中身を高さが500px以下になるまでラップし続ける」というもののように見えるのですが、それでよろしいでしょうか？つまり、.post-contentの中身にはラップされているものとラップされていないものが混じっている結果になる、と理解しているのですが、それで合っていますか？

M.Takeshita

2021/01/10 15:12

私のスクリプトが下手くそすぎて、混乱を招いてしまって、本当にすいません。。イメージ図を足してみたのですが、雑誌の記事のような形で横に並んでほしいのです。なので、文字数がわからない為、所定の高さまで来たらラップしていく。みたいな事ができるかなぁと作ったのが上記のスクリプトなのですが、再三ご指摘してもらっているじゃあ余ったpはどうすんの？の部分のスクリプトはできていません。。ただ、別の方から、cssで解決できるという回答も一ついただいたので、並行してトライしてみます。