[Solved] display:inline + html minifier = no break!?

[V15]

I have a problem with a list which needs to be displayed inline. Because I use a html minifier there are no spaces between the < li > elements. Because of this the list items doesn’t break if the screen is not wide enough.

Check my example here:
http://codepen.io/V15/pen/gbmbvV

If you change the width of the browser you can see that the list items only break itself if there are two or more words per item but not if there is only a single word per item.

If you change the html code and put breaks after every < li > it works.

Is there any trick to change this behavior without changing the html? The list is random, I cant’t change only a single list item, because I don’t know if or when this happens.

Hope my description clarifies my problem well enough!?
Thanks for help!

[kwerty]

http://codepen.io/anon/pen/vExEqo

Something like that?

[V15]

Thanks for your answer but this way it breaks the words which is not necessary if the < li > would break.

What I’m looking for is a way to get the “normal” behavior even without the space between the < li >

-> I updated my CodePen Example

[Beverleyh]

How about if you change

li { display:inline; }

to

li { display:inline-block; }?

(and maybe pop a bit of padding-right on there too)

[V15]

I tried

li { display:inline-block; }

as well but than the break between the word in one item doesn’t work anymore and every line starts with a new list item instead of filling up the previous line until the space between two words…

[kwerty]

http://codepen.io/anon/pen/YPZXWz

Not sure this is what you need.

thanks.

[Beverleyh]

Yes, that’s why I said to try it with a bit of padding-right on there too ;) It doesn’t behave exactly the same way as your preferred method but the padding-right mimics the space so it might be a suitable workaround.

[V15]

@kwerty
Thats it :-)
Thanks so much!

@Beverleyh
Nope that doesn’t work the way I want it. But thanks a lot for pointing this out anyway.

[Author]

Posts