Word wrap does not work in IE. In Chrome, FireFox and Opera, the transfer occurs automatically, but in IE it is not transferred. Chrome version IE version

main .description { display: flex; flex-direction: row; justify-content: center; align-items: center; height: 500px; width: 100%; background-image: linear-gradient(320deg, #fffbf2 10px, transparent 11px), linear-gradient(40deg, #fffbf2 10px, transparent 11px), linear-gradient(40deg, transparent 10px, #fffbf2 11px), linear-gradient(320deg, transparent 10px, #fffbf2 11px); background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, no-repeat; background-size: 15px 15px, 15px 15px, 15px 15px, 15px 15px; background-position: bottom, bottom, top, top; } main .description .column { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; width: 50%; } main .description .column h1 { text-align: center; font-family: black-coffee; font-size: 96px; margin: 0 auto; } main .description .column .tagline { text-align: center; font-family: black-coffee; font-size: 30px; width: 250px; padding: 5px 0; margin: 10px 30px; } main .description .column .text { font-family: bell; font-size: 21px; text-align: center; white-space: normal; min-width: 200px; width: auto; max-width: 510px; padding: 0 20px; } 
 <div class="description"> <div class="column"> <h1>COFFEE BREAK</h1> <p class="tagline">TAKE YOUR FREE COFEE</p> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rutrum posuere pellentesque. Donec suscipit faucibus turpis, at pulvinar nisi lobortis ac. Aenean in bibendum urna. In dignissim dapibus felis.</p> </div> </div>

  • What version of IE are you talking about? If you check the site on the old version, then the problem with flex is likely. - mJeevas
  • I'm using version 11 - Tyler Maning

1 answer 1

To allow hyphenation, you must use the hyphens CSS property. However, this property may not be supported by some browsers, and therefore options with vendor prefixes are also required:

 p { -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; }