Как запустить ключевое слово на следующей строке, если недостаточно места для показа целого ключевого слова?

Как я могу начать ключевое слово на следующей строке, если недостаточно места для показа целого ключевого слова?
Проверьте мой код.

I want this Output : keyword should start at next line if there's not enough space to show whole.

Tags: Apple Banana Melon 
      Strawberry Kiwi Orange 
      Pineapple Carrot Onion 
      Tomato Bacon Sandwitch
      SoyBeans Pork Beef Chicken 

Current Output : keyword is devided to current line and the head of next line.

Tags: Apple Banana Melon Strawbe
      rry Kiwi Orange Pineapple 
      Carrot Onion Tomato Bacon 
      Sandwitch SoyBeans Pork Be
      ef Chicken 

Текущий HTML

<div class="shop_tag ">
    <table>
        <tr>
         <th class="tag_title">tags:</th>
         <th class="tag_tags">
          

                    
Apple
                    
Banana
                    
Melon
                    
Strawberry
                    
Kiwi
                      ....
          
         </th>
        </tr>
    </table>
</div> 

Текущий CSS

div.shop_tag .table{
    display:table-row;
    display:inline;
}
div.shop_tag th.tag_title{
    width:100px;
    vertical-align: top;
}
div.shop_tag th.tag_tags{
    display:table-cell;
    vertical-align: top;
    text-align:left;
}  
div.shop_tag li{
display:inline;
}

UPDATE: At Firefox's inspector, these classes are inherited.

a:focus {
    outline: thin dotted rgb(51, 51, 51);
    outline-offset: -2px;
}

.css3 {
    font-size: 1.5em;
    color: rgb(112, 165, 255);
}

a {
    color: rgb(0, 136, 204);
}

li {
    line-height: 20px;
}

div.shop_tag th.tag_tags {
    text-align: left;
}

table {
    border-collapse: collapse;
    border-spacing: 0px;
}