Automatische Möglichkeit, Text in ein neues Element einzubinden, ohne dass dies manuell oder mithilfe eines .js/js-Frameworks erfolgen muss

Question

Was ich tun möchte, ähnelt dem Umbrechen von Textfeldern in Photoshop/Illustrator/anderer Software. Sie können einen Absatz schreiben, aber wenn er „überläuft“, springt er zu einem anderen Textfeld, genau wie beim Ausfüllen dieses Textfelds.

Wenn möglich, möchte ich diese Funktionalität ohne die Verwendung von JavaScript und nur mit HTML/CSS implementieren können oder zumindest wissen, dass dies nicht möglich ist und ich auf andere Lösungen zurückgreifen sollte.

Visuelles Beispiel für das, was ich möchte: https://i.stack.imgur.com/Dzbhv.jpg

Ich habe jede Eigenschaft ausprobiert, die ich für den CSS-Textumbruch gesehen habe, und auch Web-Scraping, aber ich habe nichts gesehen, was dem entsprach, was ich wollte.

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）。

如果还有其他需要的东西，似乎你将不得不以自定义的方式来做，但我觉得这些边缘情况很少，不应该是个大问题。

感谢大家在这个问题上的回应和帮助！