We help IT Professionals succeed at work.

CSS word break problem

rjjigg asked
In the trending area words aren't breaking correctly and as you can see the tags are cut off. How can I fix this?


Watch Question

Top Expert 2013
You are using a list the li default is display:inline which means it is supposed to wrap to the next line.  If you don't want it to wrap then you could try display:inline block and see if that helps. Otherwise try adding white-space:nowrap to all those individual classes you have created.

I don't believe I have ever seen a page where each element in a list has its own class.  That really defeats the whole point of using CSS because you are not cascading.  And simple maaintenance like you have here means changing every element instead of just one higher level rule.

In any case you might also look at an altrnate structure using block elements with float left, but then you get into a width issue that creates new problems.



white-space:nowrap worked on the li. You dont have to add styling to individual classes, but you can if you want to.

When working with CMS's, sometimes you get a ton of crap output. Stripping that is part of the process unfortuantely.

Thanks for the help, it worked!
Top Expert 2013

>>> When working with CMS's, sometimes you get a ton of crap output

Of that we arw well aware because we spend half our time trying work through it here on EE.  I personally don't have a problem with CMS's because when I am doing a site where CMS is appropriate use my own very think framework that is implemented to dinosaur standards.  It took time to slowly develop over a number of projects, but is worth the effort.  If you are in web dev for the long term, you might find that spending downtime, creating your own custom environment is time well spent and will put money in your pocket down the road.

Anyway, I'm glad we got is sorted out. :^)