Не работает перенос слов в IE. Во Chrome, FireFox и Opera перенос происходит автоматически, а в IE не переносится.
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>