css - How do I force a table row to word-break? -

i have following element hierarchy:

and, here rendering:

i want rid of horizontal scroll , replace word break (so, not split on word boundaries).

what correct css settings enable this?

if right, you're trying rid of scroll bar, maintain width , add word break .igv-popovervalue span span on right side. if can accomplish floating .igv-popovername left , .igv-popovervalue right , give them width fit on column side, this example

<td class="igv-popover-td">     <div class="igv-popovernamevalue">         <span class="igv-popovername">name</span>         <span class="igv-popovervalue">nup210l</span>     </div> </td> 

and css

.igv-popovername {     float: left;     width: 45px; } .igv-popovervalue {     word-break: break-all;     float: right;     width: 45px; }