手動または .js/js フレームワークを使用せずに、テキストを新しい要素に自動的にラップする方法

Question

私がやりたいことは、Photoshop/Illustrator/その他のソフトウェアのテキストボックスの折り返しに似ています。段落を書くことはできますが、「オーバーフロー」した場合は、別のテキストボックスにジャンプし、そのテキストを埋めるのと同じようにボックスと同じです。

可能であれば、JavaScript を使用せずに HTML/CSS のみを使用してこの機能を実現できるようにしたいと考えています。または、少なくともこれは不可能であるため、他のソリューションを使用する必要があることを知っています。

私が望むものの視覚的な例: https://i.stack.imgur.com/Dzbhv.jpg

CSS テキストのラッピングや Web スクレイピングに関してこれまでに見たすべてのプロパティを試しましたが、希望するものに似たものは見つかりませんでした。

Answer 1

枠の外に出ないように表示する単語数を設定できますが (古典的な「続きを読む」)、これは html/css を使用してのみ実現できると思います。

もちろん、私が間違っている可能性もありますが、通信したり、コンテンツを切り取ったり、特定の条件に基づいて次の div に自動的にジャンプしたりできる HTML や CSS は見当たりません。

Answer 2

他の場所でかなり近い提案を得たので、それを必要とする他の人を助けるためにここに投稿します。ただし、自由に浮動できるメソッドはないようですが、column-(x) プロパティそれが最良の選択肢のようです。

一部のドキュメントはここにあります: https://www.w3schools.com/css/css3_multiple_columns.asp

私がこれを実装した方法は、自己記述クラス (この場合はthreeColumnDiv) を割り当て、必要なときにいつでもそれを使用することです。

もう 1 つ理想的と思われるのは、grid-row 属性です (参考: https://www.w3schools.com/cssref/pr_grid-row.php)。

他に必要な場合は、カスタムの方法で行う必要があるようですが、このような特殊なケースはまれであり、大きな問題にはならないと思います。

この問題に関してご回答とご協力をいただきました皆様、ありがとうございました!