1

Не работает перенос слов в IE. Во Chrome, FireFox и Opera перенос происходит автоматически, а в IE не переносится.

Версия Chrome

Версия 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>

2
  • О какой версии IE идет речь? Если вы проверяете сайт на старой версии, то проблема с флексом скорее всего.
    – user31906
    10 мая 2016 в 5:42
  • я использую 11 версию 10 мая 2016 в 11:37

1 ответ 1

-1

Для разрешения переносов необходимо использовать CSS-свойство hyphens. Однако это свойство может не поддерживаться некоторыми обозревателями, а потому требуются ещё и варианты с вендорными префиксами:

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.