Moyen automatique d'envelopper du texte dans un nouvel élément sans avoir à le faire manuellement ni à utiliser un framework .js/js

Question

Ce que je veux faire est similaire à l'habillage d'une zone de texte dans Photoshop/Illustrator/autre logiciel, vous pouvez écrire un paragraphe mais s'il "déborde", il passera à une autre zone de texte, tout comme si vous remplissiez cette zone de texte.

Si possible, j'aimerais pouvoir implémenter cette fonctionnalité sans utiliser JavaScript, en utilisant uniquement HTML/CSS, ou du moins savoir que ce n'est pas possible et que je devrais me tourner vers d'autres solutions.

Exemple visuel de ce que je veux : https://i.stack.imgur.com/Dzbhv.jpg

J'ai essayé toutes les propriétés que j'ai vues pour l'habillage de texte CSS, ainsi que pour le web scrapé, mais je n'ai rien vu qui ressemble à ce que je voulais.

Answer 1

Vous pouvez définir le nombre de mots affichés pour éviter de sortir des sentiers battus (classique "lire la suite"), mais je suppose que vous ne pouvez y parvenir qu'en utilisant html/css.

Bien sûr, je peux me tromper, mais je ne vois pas de HTML ou de CSS capables de communiquer, de couper du contenu et de passer automatiquement au div suivant en fonction de conditions spécifiques.

Answer 2

J'ai reçu une suggestion assez proche ailleurs et je poste ici pour aider ceux qui pourraient en avoir besoin, il ne semble pas y avoir de méthode flottante libre, cependant, column-(x) les attributs semblent être la meilleure option.

De la documentation peut être trouvée ici : https://www.w3schools.com/css/css3_multiple_columns.asp

La façon dont je l'ai implémenté est de lui attribuer une classe auto-descriptive (troisColumnDiv dans ce cas) et de l'utiliser chaque fois que j'en ai besoin.

Une autre chose qui semble idéale est l'attribut grid-row (référence : https://www.w3schools.com/cssref/pr_grid-row.php).

Si quelque chose d'autre est nécessaire, il semble que vous devrez le faire de manière personnalisée, mais j'ai l'impression que ces cas extrêmes sont rares et ne devraient pas être un gros problème.

Merci à tous pour votre réponse et votre aide sur ce problème !