Internet Explorer 10 分词不工作答案

【问题标题】：Internet explorer 10 word-break not workingInternet Explorer 10 分词不工作
【发布时间】：2019-12-12 19:56:47
【问题描述】：

如果文本发生更改，我希望文本根据表格的宽度自动换行。除了 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> 元素在其他浏览器中正确对齐。

【问题讨论】：

标签： html css internet-explorer-10

【解决方案1】：

你可以使用下面的 css 来代替你的：

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

【讨论】：

这个方案没有解决问题。我遇到了同样的问题，IE10 没有像 chrome 那样自动破坏文本行。在 caniuse 中快速搜索显示 IE10 不支持 break-word 值 caniuse.com/#search=break-word

【解决方案2】：

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

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

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

以我为例（其中我需要支持某个项目卡容器内部文本在 x 轴（水平）上溢出 - 我所做的是给 width: 120px; 并且能够让 IE10 尊重这个宽度并且断句。

【讨论】：