title: Denoting a preferred place for a line break
body: <p>Let's say I have this text that I want to display in an HTML table cell:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>and I want the line to break preferentially after one of the commas. </p>
  
  <p><strong>Is there a way to tell the HTML renderer to try breaking at some designated spot, and do that first before trying to break after one of the spaces, <em>without</em> using non-breaking spaces?</strong> If I use non-breaking spaces then it makes the width larger unconditionally. I <em>want</em> the line break to happen after one of the spaces, if the line-wrapping algorithm has tried it with the commas first and can't get the line to fit.</p>
  
  <p>I tried wrapping text fragments in <code>&lt;span&gt;</code> elements but that doesn't seem to do anything helpful.</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;style type="text/css"&gt;
          div.box { width: 180px; }
          table, table td { 
            border: 1px solid; 
            border-collapse: collapse; 
          }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="box"&gt;
        &lt;table&gt;
        &lt;tr&gt;
            &lt;td&gt;lorem ipsum&lt;/td&gt;
            &lt;td&gt;lorem ipsum&lt;/td&gt;
            &lt;td&gt;lorem ipsum&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;lorem ipsum&lt;/td&gt;
            &lt;td&gt;
              &lt;span&gt;Honey Nut Cheerios,&lt;/span&gt;
              &lt;span&gt;Wheat Chex,&lt;/span&gt;
              &lt;span&gt;Grape-Nuts,&lt;/span&gt;
              &lt;span&gt;Rice Krispies,&lt;/span&gt;
              &lt;span&gt;Some random cereal with a very long name,&lt;/span&gt;
              &lt;span&gt;Honey Bunches of Oats,&lt;/span&gt;
              &lt;span&gt;Wheaties,&lt;/span&gt;
              &lt;span&gt;Special K,&lt;/span&gt;
              &lt;span&gt;Froot Loops,&lt;/span&gt;
              &lt;span&gt;Apple Jacks&lt;/span&gt;
            &lt;/td&gt;
            &lt;td&gt;lorem ipsum&lt;/td&gt;
        &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <p>note: It looks like the <a href="http://www.w3.org/TR/2011/WD-css3-text-20110215/#example-avoid" rel="noreferrer">CSS3 <code>text-wrap: avoid</code></a> behavior is what I want, but I can't seem to get it to work.</p>