CSS：在锚元素中打破长字而不破坏Internet Explorer 11中的小字

Question

基本上我想按照锚元素的文字执行此处所说的内容：How to break long words in the text without breaking short words， 使用Internet Explorer 11， 我已经尝试了很多组合：
word-break:break-all;
word-break: break-word;
word-wrap: break-word:
从这个问题：
Internet Explorer 11 word wrap is not working
 我知道我应该将white-space: pre-wrap属性添加到我已经做过的代码中。不过，这对我不起作用。

这是HTML代码：

<div class="container">
  <table class="table">
    <tbody class="tBody">
      <tr>
        <td>
          <span>
             <img src="image.png">
              <a href="">This is a verrrrrrrrrrrrrrrrrrrrrrrrrrrrrrryyyyy long
                      text that doesnt work like I want it to. I hate IE.
              </a>
          </span>
         </td>
      </tr>
   </tbody>
  </table>
</div>

CSS：

.container {
  white-space: pre-wrap;
  display: inline-table;
  word-wrap: break-word; 
  word-break: break-all;
 }

Answer 1

我终于成功了，我把它添加到我的CSS文件中：

 .main-body{
        height:72%;    /* added */
        padding:0px;  /* editied  */
    }
    .header{
      height:20%;   /* edited*/
      max-height:20%; /* edited but actually not needed to have max height */
    }