html (+css): denoting a preferred place for a line break
By using
span.avoidwrap { display:inline-block; }
and wrapping the text I want to be kept together in
<span class="avoidwrap"> Text </span>
it will wrap first in preferred blocks and then in smaller fragments as needed.
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; }
}
An easy answer is to use the zero-width space character ​ It is used for making breakspaces inside words at specific points.
Does the exact opposite of the non-breaking space (well, actually the word-joiner ⁠)(word-joiner is the zero-width version of non-breaking space)
(there are also other non breaking codes like the non-breaking hyphen ‑)(here is an extensive answer on different 'variants' of nbsp)
If you want an HTML-only (no CSS/JS) solution you could use a combination of the zero-width space and the non-breaking space, however this would be really messy, and writing a human-readable version requires a little effort.
ctrl + c, ctrl + v helps
example:
Honey Nut Cheerios,<!---->​<!--
-->Wheat Chex,<!---->​<!--
-->Grape‑Nuts,<!---->​<!--
-->Rice Krispies,<!---->​<!--
-->Some random cereal with a very long name,<!---->​<!--
-->Honey Bunches of Oats,<!---->​<!--
-->Wheaties,<!---->​<!--
-->Special K,<!---->​<!--
-->Froot Loops,<!---->​<!--
-->Apple Jacks
unreadable? this is the same HTML with no comment tags:
Honey Nut Cheerios,​Wheat Chex,​Grape‑Nuts,​Rice Krispies,​Some random cereal with a very long name,​Honey Bunches of Oats,​Wheaties,​Special K,​Froot Loops,​Apple Jacks
However, since email html rendering is not completely standardized, its good for that kind of use since this solution uses no CSS/JS
Also, if you use this in combination with any of the <span>-based solutions, you will have complete control of the line-breaking algorithm
(editorial note:)
The only problem I could see you having is if you wanted to change the points of preferred breakage dynamically. This would require constant JS manipulation of each of the spans proportionate size, and having to handle those HTML entities in the text.