HTML文本在表中溢出

Question

我正在构建一个带有聊天功能的在线角色扮演游戏。问题是在用于聊天的div之后出现了太长的消息溢出。当您登录游戏和参加聚会时，可以看到以下代码： https://jsfiddle.net/TurtleForGaming/sn6r1dv9/38/

   <div class="chat" id="middle-panel">
      <table>
          <tr>
            <td class="chaticon "><img class="chat_msgicon" src="http://54.37.64.4:5000/assets/img/sv.png"></td>
            <td class="chatwho" style="color:#723b08">[server]</td>
            <td class="chatmsg" style="color:#723b08"><span>Samuel has left the party</span></td>
          </tr>
          <tr>
            <td class="chaticon"><img class="chat_msgicon" src="http://54.37.64.4:5000/assets/img/sv.png"></td>
            <td class="chatwho" style="color:#723b08">[server]</td>
            <td class="chatmsg" style="color:#723b08"><span>Samuel has join the party</span></td>
           </tr>
           <tr>
             <td class="chaticon"> <img class="chat_msgicon" src="http://54.37.64.4:5000/assets/img/sv.png"></td>
             <td class="chatwho">[Samuel]</td>
             <td class="chatmsg"><span>THISISAVERYLONGMESSAGETHAT DOSENTSHOWUPCONPLETELYONTHESCREENBECAUSEHTMLISBROKEN</span></td>
           </tr>
           <tr>
             <td class="chaticon"> <img class="chat_msgicon" src="http://54.37.64.4:5000/assets/img/sv.png"> </td>
             <td class="chatwho">[Samuel]</td>
             <td class="chatmsg"><span>THIS IS A VERY LONG MESSAGE THAT DOSEN'T SHOW UP CONPLETELY ON THE SCREEN BECAUSE HTML IS BROKEN</span></td>
           </tr>
      </table>
    </div>

我搜索了很多内容，但不知道如何在屏幕上显示完整的消息。 （顺便提一下，小提琴没有js，因为它会使所有内容崩溃）。 我已经尝试使用：overflow-x: hidden; word-wrap: break-word;，但是我倒是因为<table>块不兼容