html (+ css): denota um local preferido para uma quebra de linha

Question

Mar 22, 2011, 03:31 PM

html (+ css): denota um local preferido para uma quebra de linha

Digamos que tenho este texto que quero exibir em uma célula da tabela HTML:

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

e quero que a linha quebre preferencialmente após uma das vírgula

xiste uma maneira de instruir o renderizador HTML a tentar quebrar em algum local designado e fazer isso antes de tentar quebrar após um dos espaçose usando espaços sem quebra? Se eu usar espaços sem quebra, isso aumentará a largura incondicionalmente. EUque a quebra de linha ocorrer após um dos espaços, se o algoritmo de quebra de linha tiver tentado primeiro com as vírgulas e não conseguir que a linha caib

entei agrupar fragmentos de texto em<span> elementos, mas isso não parece ajudar em nad

<html>
  <head>
      <style type="text/css">
        div.box { width: 180px; }
        table, table td { 
          border: 1px solid; 
          border-collapse: collapse; 
        }
      </style>
  </head>
  <body>
    <div class="box">
      <table>
      <tr>
          <td>lorem ipsum</td>
          <td>lorem ipsum</td>
          <td>lorem ipsum</td>
      </tr>
      <tr>
          <td>lorem ipsum</td>
          <td>
            <span>Honey Nut Cheerios,</span>
            <span>Wheat Chex,</span>
            <span>Grape-Nuts,</span>
            <span>Rice Krispies,</span>
            <span>Some random cereal with a very long name,</span>
            <span>Honey Bunches of Oats,</span>
            <span>Wheaties,</span>
            <span>Special K,</span>
            <span>Froot Loops,</span>
            <span>Apple Jacks</span>
          </td>
          <td>lorem ipsum</td>
      </tr>
      </table>
    </div>
  </body>
</html>

ota: Parece que o CSS3text-wrap: avoidomportar é o que eu quero, mas não consigo fazê-lo funciona