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 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:

Honey Nut Cheerios, 
Wheat Chex, etc.

And one line of CSS in you media query:

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