Internet Explorer 10 中 word-break 不起作用

Question

如果表格的宽度改变，我希望文本能够相应地换行。我的CSS在所有浏览器中都有效（Firefox、Chrome，甚至其他版本的IE），但在IE 10中无效。

这是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>元素的正确对齐。

- losaliens

Answer 1

您可以使用以下CSS代替您的CSS：

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

- Super User

---

这个解决方案没有解决问题。我在IE10上遇到了和Chrome一样的问题，即文本行没有自动换行。在caniuse上进行快速搜索显示，break-word属性在IE10中不受支持。 https://caniuse.com/#search=break-word - greensin

Answer 2

IE10是一个不再受支持的浏览器，微软不再投入时间开发新功能或将其适应更新的技术(JS、CSS等...)。

目前解决此问题的方法是为包含文本的容器设置固定的像素宽度width。IE10会将任何溢出-x的内容移到下一行。如果需要支持IE10，这是您可以达到的最好效果。如图所示，IE10不尊重word-break值：

检查链接： https://caniuse.com/#search=break-word

例如，在我的情况下，我需要支持某个项目卡片容器内文本在x轴（水平方向）上溢出 - 我所做的就是给它设置width: 120px;，并能够使IE10尊重这个宽度并打断句子。

- greensin