html - Internet Explorer 10 断字不起作用

Question

如果更改，我希望文本根据表格的宽度自动换行。除了 IE 10，我的 CSS 在任何地方(Firefox、Chrome，甚至其他版本的 IE)都有效。

这是 HTML 代码:

<div class="container">
  <table class="table">
    <tbody class="tBody">
      <tr>
       <td>
          <span class="spanClass">
             <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;
 }

 table {
  width:100%;
  table-layout:fixed;
 }

.spanClass {
  display: inline-flex;
 }

我注意到 .spanClass规则可能会干扰我想要的，但我需要该规则来保持 <img>和 <a>元素在其他浏览器中正确对齐。

Answer 1

您可以使用下面的 css 代替您的:

.spanClass {
  display: inline-block;
  word-wrap: break-word;
  word-break: break-all;
 }