html (+css): denoting a preferred place for a line break

Question

Let\'s say I have this text that I want to display in an HTML table cell:

Honey Nut Cheerios, Wheat Chex, Grape-Nuts, Rice Krispies, Some random cereal with          


        

Answer 1

There’s an HTML element for that™: the (now standardized) <wbr> element.

I’d advise you to use that. It may not work everywhere, but it’s the best you can do without going through hoops.

Answer 2

There's a very neat RWD-solution from Dan Mall that I prefer. I'm going to add it here because some other questions regarding responsive line breaks are marked as duplicates of this one.
In your case you'd have:

<span>Honey Nut Cheerios, <br class="rwd-break">Wheat Chex, etc.</span>

And one line of CSS in you media query:

@media screen and (min-width: 768px) {
    .rwd-break { display: none; }
}

Answer 3

Use <div> instead of <span>, or specify a class for SPAN and give it the display:block attribute.