why this wrapping behavior?

ssssadsadasd · 2025-04-27T09:17:40.941+00:00

[here ](https://toddle.dev/projects/moccasin_palpatine_chief_rook/branches/start/components/test12?canvas-height=800&canvas-width=213.9&rightpanel=style) I have a list of spans and I want to wrap them, i.e. when the width is low I want the text to go to the next line. and I achieve this.but what makes me wonder is that if I changes the flex of the main div of the page from column to row the wrapping behavior is broken even though I do not know why this should influence the wrapping.anyone has any idea? thanks

ssssadsadasd

3 months ago

[here ](https://toddle.dev/projects/moccasin_palpatine_chief_rook/branches/start/components/test12?canvas-height=800&canvas-width=213.9&rightpanel=style) I have a list of spans and I want to wrap them, i.e. when the width is low I want the text to go to the next line. and I achieve this.
but what makes me wonder is that if I changes the flex of the main div of the page from column to row the wrapping behavior is broken even though I do not know why this should influence the wrapping.
anyone has any idea? thanks
Jay | DRAGXN

3 months ago

Why do a list of spans when you could merge them all into a single string?
@ssssadsadasd
[here ](https://toddle.dev/projects/moccasin_palpatine_chief_rook/branches/start/components/test12?canvas-height=800&canvas-width=213.9&rightpanel=style) I have a list of spans and I want to wrap them, i.e. when the width is low I want the text to go to the next line. and I achieve this.
but what makes me wonder is that if I changes the flex of the main div of the page from column to row the wrapping behavior is broken even though I do not know why this should influence the wrapping.
anyone has any idea? thanks
Filip Dajkovic

3 months ago

You can prevent that by adding width: 100%; or flex: 1; to this 2nd div
Jay | DRAGXN

3 months ago

Ah I see it might be related to your other help questions. In that case you want to set either width (like @Filip Dajkovic said) or max-width to 100%.
ssssadsadasd

3 months ago

thanks both
ssssadsadasd

3 months ago

@Filip Dajkovic @Jay | DRAGXN thing is that [when I have](https://toddle.dev/projects/moccasin_palpatine_chief_rook/branches/start/components/test12?canvas-height=800&canvas-width=569.9&selection=nodes.UVQfXasv9os3HkfQBexLB&rightpanel=style) a long text with no tags it goes beyond the div
Lucas G

3 months ago
The spans don't need to be flex containers
they just need to have a max-width of 100%
ssssadsadasd

3 months ago

@Lucas G yeah, thanks. just one last thing. suppose I have sth like "@elonmusk is the ceo of x and jeff bezos is the ceo of amazon", so a tag at the beginning and a long text after (so two elements in the list). this breaks immediately after @elonmusk. I would want the long text to continue immediately after and then brake at the end of the line
Filip Dajkovic

3 months ago

I'm not sure if this is the best/only way to achieve that but you could have every word as a span by splitting the sentence on every space (" "). And than you can setup the class and logic for your tags by looking if the word starts with "@". Not sure if it's best practice and if there would be any issues with it.
ssssadsadasd

3 months ago

@Filip Dajkovic this is what I implemented actually. thing is that when there are two spans like this:
@elonmusk
is the ceo of x and jeff bezos is the ceo of amazon

it immediately breaks after the second span, as a sentence, exceeds the scren size. I want the second span to break word by word
Lucas G

3 months ago

How big of a text would you be doing this to?
You’d be creating a massive DOM tree if you split everything word for word
ssssadsadasd

3 months ago

@Lucas G
it is not split word by word but by tag. so
@elonmusk is the ceo of x - two spans ("@elonmusk", "is the ceo of x")
@elonmusk is the ceo of @x - three spans ("@elonmusk", "is the ceo of", "@x")
Lucas G

3 months ago

Ok took a closer look at it and spltting text is not a good solution, clearly
The issue is spreaking things into their own spans
Lucas G

3 months ago

Updated the original post
Filip Dajkovic

3 months ago

@ssssadsadasd he's right, you should keep things as they are now, just change the div wrapping spans and spans too to display: inline and you'll get them to wrap properly😁
Lucas G

3 months ago

On a sidenote, there are too many divs being used 😂
Lucas G

3 months ago

This does still create a bunch of span tags unfortunately. I think I would go with a JS approach
But it works though
ssssadsadasd

3 months ago

@Filip Dajkovic hmm I changed to inline but it is not changing for me..
Lucas G

3 months ago

Looking at his screenshot, he set both the div and span to inline
ssssadsadasd

3 months ago

@Lucas G ah yeah, thanks
Lucas G

3 months ago

I’d get rid of the additional divs though but I know this is just for demo purposes
ssssadsadasd

3 months ago

@Lucas G yeah the divs are just for demo purposues to show different texts. sorry for the confusion
@ssssadsadasd
@Lucas G yeah the divs are just for demo purposues to show different texts. sorry for the confusion
Lucas G

3 months ago

No no it’s alright. I’m just a “use the least amount of divs as possible” person lol
Lucas G

3 months ago

Generally speaking, we wanna keep the DOM clean but this isn’t prod it’s fine 😬

why this wrapping behavior?

ssssadsadasd

Jay | DRAGXN

Filip Dajkovic

Jay | DRAGXN

ssssadsadasd

ssssadsadasd

Lucas G

ssssadsadasd

Filip Dajkovic

ssssadsadasd

Lucas G

ssssadsadasd

Lucas G

Lucas G

Filip Dajkovic

Lucas G

Lucas G

ssssadsadasd

Lucas G

ssssadsadasd

Lucas G

ssssadsadasd

Lucas G

Lucas G