自動將文字包裝到新元素中的方法，無需手動或使用.js/js框架手動操作

Question

我想要做的是類似於Photoshop/Illustrator/其他軟體中的文本框換行，你可以寫一個段落，但是如果“溢出”，它會跳到另一個文本框中，就像填充那個文本框一樣。

如果可能的話，我希望能夠在不使用JavaScript的情況下，只使用HTML/CSS來實現這個功能，或者至少知道這是不可能的，我應該轉向其他方案。

我想要的視覺範例：https://i.stack.imgur.com/Dzbhv.jpg

我嘗試了我見過的CSS文字換行的每個屬性，也進行了Web爬取，但是我沒有看到任何類似於我想要的東西。

Answer 1

你可以設定顯示的單字數量，以防止超出盒子（經典的「閱讀更多」），但我懷疑你只能使用html/css來實現這一點。

當然，我可能錯了，但我沒有看到html或css可以根據特定條件進行通信，剪切內容並自動跳到下一個div。

Answer 2

我在其他地方得到了一個非常接近的建議，我在這裡發布帖子，以幫助可能需要的其他人，似乎沒有一個自由浮動的方法，然而，column-(x)屬性似乎是最好的選擇。

在這裡可以找到一些文件：https://www.w3schools.com/css/css3_multiple_columns.asp

我實作的方式是給它一個自我描述的類別（在這種情況下是threeColumnDiv），每當我需要時都會使用它。

另一個似乎可能理想的東西是grid-row屬性（參考：https://www.w3schools.com/cssref/pr_grid-row.php）。

如果還有其他需要的東西，似乎你將不得不以自訂的方式來做，但我覺得這些邊緣情況很少，不應該是個大問題。

感謝大家在這個問題上的回應和幫助！