How to prefer to wrap text in one column before break-all in another?

user_1342919 0
Viewed 703

Finally I think I've found a question that nobody has exactly asked before. I have a table with two columns. The first column might sometimes have a reallyreallyreallylongword. The second column always has many short words which wrap well. If I apply word-break:break-all to the first column and then shrink my browser window, the columns stay 50/50 when I would prefer to wrap all the short words in the second column before doing the ugly break-all wrapping in the first column.

<table>
  <tr>
    <td style="word-break:break-all;">reallyreallyreallyreallylongword</td>
    <td>Here are a lot of short words that wrap nicely</td>
  </tr>
</table>

I need to wrap all possible wrappable words in all columns before resorting to the ugly break-all, but still going to it as a last resort to prevent overflow. It doesn't matter which columns end up wider.

word-break html-table overflow word-wrap css
1 Answers

So if you give the two columns a percentage width, with one larger than the other, the larger one will take longer before it starts having to shrink the text.

EG:

    <table>
      <tr>
         <td class="widecolumn">reallyreallyreallyreallylongword</td>
         <td class="smallcolumn">Here are a lot of short words that wrap nicely</td>
      </tr>
    </table>

    table {
      max-width:1000px;
      width:100%;
    }

    td {
      word-break:break-all;
    }
    td.widecolumn {
      width:65%;  
    }
    td.smallcolumn {
      width:35%;
    }

working example: https://codepen.io/FEARtheMoose/pen/XPKPNZ

user_31940160
Related