Search code examples
htmlcssword-wrapstylingtext-styling

Is there a way to wrap text to a new div/p/other element automatically without manually needing to manually or with .Js/js framework?


what i'm looking to do, is something akin to text-box wrapping in photoshop/illustrator/other, where you can write one paragraph, but if you "spill over" it will jump to another text box as if it's filling out that one.

I'm ideally looking for a way to do this with no javaScript, using only html/css if possible, or at least know this isn't possible and that i should move onto other prospects.

visual example of what i mean: https://i.sstatic.net/Dzbhv.jpg

i tried every property of css text wrapping that i seen, along with web crawling but i haven't been able to see anything like what i'm looking for.


Solution

  • I was suggested a way that is close enough elsewhere, and I'm posting here to help anyone else who might need it, a free floating one does not seem to exist, however, the column-(x) properties seem to be the best option.

    think to some documentation here: https://www.w3schools.com/css/css3_multiple_columns.asp

    the way i implemented it was to assign a class to it that is self descriptive (threeColumnDiv in this case), which i will use any time i need to.

    another thing which seems like maybe ideal is the grid-row properties (reference: https://www.w3schools.com/cssref/pr_grid-row.php.

    If there's anything else desired, it seems you will have to do it in a custom manner, but i feel like those edge cases are rare enough it should not be a big deal.

    Thanks for everyone's responces and help in the matter!