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

Question

Using flexbox on a video overlay div that shows/hides with Javascript and matches the auto size of the video. The text on this overlay div wraps perfectly on every browser except IE and Edge where it overflows outside the div instead of wrapping.

I've tried using white-space , overflow min-width and various CSS changes that have been suggested to others that have similar problems but none have worked for me.

The code below is heavily cut back from its original form so hopefully I haven't left out anything important. I have removed code for several other divs from within the main "Box" div that also hide/show with JS but are not showing while this div in question is showing so it is specific to this div as the other do not have long text fields.

I have tried adding additional CSS to the H3 "infoText" to try to wrap, align, justify etc but nothing fixes this overflow problem on Edge and 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

After trying dozens of configurations within parent and child div CSS values I have solved this problem by adding max-width to the H3 element ID infoText . Everything else on the style sheet has remained unchanged. This currently appears to solve the lack of wrapping problem on IE and Edge without causing any other apparent issues at this point. I'm assuming all other browsers have a default max-width so this problem doesn't occur inside flexbox so its difficult to understand why MS products don't.

#infoText {
max-width:80%;
}

Answer 2

If I understand correctly your article, you need to do something like this in your css style.

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*/

I hope this helps you.