Wordのようにテキストの長さに応じてブロックを分割して表示

Question

teratail初使用でどのくらい回答が得られるのか不確かのため同質問を別プラットフォームでも掲載中
https://qiita.com/shinek92/questions/bcaa0083d8248fb96581

前提・実現したいこと

Reactにてwordのようなエディタを実現したいのではなく、上の画像ような見た目を実現しReactコンポーネントで書類のスタイルを作りたい。
与えたテキストがブロックをoverflowすると自動的に新しいブロックが追加され、続きが表示されるようにしたい。

試したこと

cssにてmulti-columnレイアウトを試しました。おおよそできそうな感じですが、ページ番号などを振りたいのでmulti-columnレイアウトではそれは無理そうなのと、段落方向が一方向（横書きなら左から右、縦書きなら上から下）にしかならないので、やはりコンポーネントでできるようになる糸口を探しています。

ご教授お願いします。

Comments

[1T2R3M4]

https://qiita.com/shinek92/questions/bcaa0083d8248fb96581

以下ご対応ください。
https://teratail.com/help#posted-otherservice

Answer 1

CSS Regions がそのような機能を持っています。

「CSS Regionsを使った新しいCSSレイアウトを作る方法」HTML5 Conference2013レポート | HTML5Experts.jp

W3Cの仕様はワーキングドラフトとなっていますが、2014年より更新がありません。

CSS Regions Module Level 1

ブラウザ対応は、IE11と過去のwebkit系にとどまっています。

"CSS Regions" | Can I use... Support tables for HTML5, CSS3, etc

ポリフィルはあるようですが、あまり活発ではないようです。

GitHub - FremyCompany/css-regions-polyfill: A javascript implementation of the CSS Regions specification, as of August 2013
GitHub - adobe-webplatform/css-regions-polyfill: Experimental CSS Regions polyfill written in JavaScript

---

CSSの組版モジュールである、CSS GCPM も止まっているようです。

CSS Generated Content for Paged Media Module

---

以上のような状況ですので、CSSで対応するのは難しく、VivlioStyle のようなページングをするモジュールを使うのが現実的かな、と思います。
vivliostyle.js/packages/react at master · vivliostyle/vivliostyle.js · GitHub

ただ、ご質問を読むとページメディアにしたいわけではなさそうなので、そうすると CSS Regions ポリフィルなどを元に自分でやるしかないのかもしれません。