Using CSS to divide text into rows

On my wordpress / woocommerce website I have a lot of product options, in my cart where those options are displayed – the options chosen are presented as a fluent text as oppose to have one option per row which would look a lot more structured and would be easier to read.

My question is if its possible, using CSS to structure the fluent text into rows, CSS would be the most convenient way for me to resolve it although I am open to other options as well.

Try adding the following product to cart LINK
Add to cart button says “LÄGG TILL I KUNDVAGN” on my language.
Then go to CART.

As you can see in the first column beneath the title and beside the product image – Type of option in regular text then : and chosen option in bold text.
First two options are “Bredd: 5 (480 mm) Höjd: 5 (480 mm)

What I want is it to be displayed like this instead:

Bredd: 5 (480 mm)

Höjd: 5 (480 mm)


Is there an easy solution to this problem? Again preferably via CSS?

Thanks a lot in advance!

Read more here: Using CSS to divide text into rows

Leave a Reply

Your email address will not be published. Required fields are marked *