What I want to do is similar to text box wrapping in Photoshop/Illustrator/other software, you can write a paragraph but if it "overflows" it will jump to another text box and just like fill that text Same as the box.
If possible, I would like to be able to achieve this functionality using only HTML/CSS without using JavaScript, or at least know that this is not possible and I should turn to other solutions.
Visual example of what I want: https://i.stack.imgur.com/Dzbhv.jpg
I've tried every property I've seen for CSS text wrapping, and also web scraped, but I haven't seen anything that resembles what I want.
P粉4765470762023-09-15 12:51:49
You can set the number of words displayed to prevent going outside the box (classic "read more"), but I suspect you can only achieve this using html/css.
Of course, I could be wrong, but I don't see html or css that can communicate, cut content and automatically jump to the next div based on specific conditions.
P粉9208354232023-09-15 11:40:48
I got a pretty close suggestion elsewhere and I'm posting here to help others who may need it, there doesn't seem to be a free floating method, however, column-(x) Property seems to be the best option.
Some documentation can be found here: https://www.w3schools.com/css/css3_multiple_columns.asp
The way I implemented it is to assign it a self-describing class (threeColumnDiv in this case) and use it whenever I need it.
Another thing that seems like it might be ideal is the grid-row attribute (reference: https://www.w3schools.com/cssref/pr_grid-row.php).
If there's anything else needed, it seems like you're going to have to do it in a custom way, but I feel like these edge cases are rare and shouldn't be a big issue.
Thank you everyone for your response and help on this issue!