html - キーワード全体を表示するのに十分なスペースがない場合、キーワードを次の行から開始するにはどうすればよいですか？

Question

キーワード全体を表示するのに十分なスペースがない場合、キーワードを次の行から開始するにはどうすればよいですか？
私のコードを確認してください。

全体を表示するのに十分なスペースがない場合は、この出力：キーワードを次の行から開始する必要があります。

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

現在の出力：キーワードは現在の行と次の行の先頭に分割されます。

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">
          <ul>
                    <li>Apple</li>
                    <li>Banana</li>
                    <li>Melon</li>
                    <li>Strawberry</li>
                    <li>Kiwi</li>
                      ....
          </ul>
         </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;
}

更新： Firefoxのインスペクターでは、これらのクラスは継承されます。

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;
}