如何阻止 IE 和 Edge 上的文本溢出 div

Question

在使用 Javascript 显示/隐藏并匹配视频自动大小的视频覆盖 div 上使用 flexbox。此覆盖 div 上的文本在除 IE 和 Edge 之外的所有浏览器上都完美换行，因为它在 div 之外溢出而不是换行。

我尝试过使用white-space、overflow min-width 以及向有类似问题的其他人建议的各种 CSS 更改，但没有一个对我有用。

下面的代码从原来的形式大幅缩减，所以希望我没有遗漏任何重要的东西。我已经从主“框”div 中删除了其他几个 div 的代码，这些 div 也使用 JS 隐藏/显示，但在显示该 div 时未显示，因此它特定于该 div，因为另一个没有长文本字段.

我尝试向 H3“infoText”添加额外的 CSS 以尝试换行、对齐、对齐等，但没有解决 Edge 和 IE 上的溢出问题。

<div id="Box">
  <video id="myvid" width="100%">
    <source src="video1.mp4">
  </video>

  <div id="intro"> // this div is an overlay for video player
      <h3 id="infoText">Lots of text goes here........</h3>
     // this text overflows on both sides of the div
      <button class="mybutton" id="start">Start</button>
  </div>
</div>


#Box {
  position: relative;
  width: 100%;
  height: auto;
}
#intro {
  width: 100%;
  height: 100%;
  position: absolute;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 0px;
}

Answer 1

在父子 div CSS 值中尝试了数十种配置后，我通过将 max-width 添加到 H3 元素 ID infoText 解决了这个问题。样式表上的其他所有内容都保持不变。目前，这似乎解决了 IE 和 Edge 上缺少换行的问题，而此时不会导致任何其他明显的问题。我假设所有其他浏览器都有一个默认的最大宽度，所以这个问题不会出现在 flexbox 中，所以很难理解为什么 MS 产品没有。

#infoText {
max-width:80%;
}

Answer 2

如果我对您的文章理解正确，您需要在您的 css 样式中执行类似的操作。

text-overflow: ellipsis;  /* IE 6+, FF 7+, Op 11+, Saf 1.3+, Chr 1+*/
-o-text-overflow: ellipsis;  /* for Opera 9 & 10 *
-ms-text-overflow: ellipsis; /*IE 8*/

希望对你有帮助。