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

Answer 2

IE10是不再受支持的浏览器，Microsoft不会花费时间开发新功能或使其适应更新技术（JS，CSS等...）。

要当前解决您的问题，您可以为包含文本的容器提供固定的width像素。 IE10然后将所有溢出的x内容删除到下一行。如果需要支持IE10，这是您可以达到的最佳效果。您会看到IE10不遵守所附图片中的word-break值：

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

例如，在我的情况下（要求我支持某项卡片容器的内部文本在x轴上溢出（水平）-我所做的就是给width: 120px;并且使IE10尊重这一点宽并打断句子。