Question

Is there a CSS property that tells the browser to word-wrap at any position, not only at word boundaries?

My current issue is this. I am faced with HTML similar to this: (I cannot change the HTML, unfortunately)

<div id='categories'>Categories:
    <ul>
        <li>Category One</li>
        <li>Category Two</li>
        <li>Category Three</li>
    </ul>
</div>

I want it to display in a flowing manner according to the width of the viewport:

Categories:  • Category One  • Category Two   • Category Three
|----------------------------------------------------------------| (viewport)

Categories:  • Category One  • Category Two
• Category Three
|----------------------------------------------| (viewport width)

Categories:  • Category One
• Category Two   • Category Three
|----------------------------------| (viewport width)

… but NOT word-breaking within a category name.

So I tried this:

 #categories ul {
  display: inline;
 }
 #categories li {
  display: inline;
  padding: 0 1em;
  white-space: nowrap;
 }
 #categories li:before {
  content: '• ';
 }

Unfortunately this causes them all to run in one line. So I need to be able to tell the ul to allow wrapping anywhere between any adjacent lis. How do I do that?

I need a CSS-only solution; I cannot change the HTML…

Answer 1

A useful trick for wrapping boxes is to make them all float: left. If I do this to your example, then I get the layout you want except for “Categories:” being pushed to the right. Unfortunately, I don’t know of a way to select the text so as to make it floated.

We can use content to re-insert “Categories:” as one of the floated boxes, which leaves the problem of how to hide the existing “Categories:” text without hiding the other contents of #categories. The cleanest way I thought of was to make it transparent. However, this is a CSS3 feature; also, this loses any inherited color due to the need to explicitly set it on the ul.

This stylesheet produces everything you want, but needs some tweaking for spacing.

#categories {
 color: transparent;
}
#categories ul {
 color: black;
}
#categories li {
 display: inline;
 float: left;
 padding: 0 1em;
 white-space: nowrap;
}
#categories li:before {
 content: '• ';
}
#categories li:first-child:before {
 content: 'Categories: • ';
}