Не перененосятся слова в IE10. Как решить данную проблему?

Question

[s24344]

Ребята, подскажите как решить следующую проблему. В IE10 не перененосятся слова на новую строку.

<ul class="list">
  <li class="list__item"><a class="list__link" href="#"><span>First</span></a></li>
  <li class="list__item"><a class="list__link" href="#"><span>Second</span></a></li>
  <li class="list__item"><a class="list__link" href="#"><span>Third</span></a></li>
  <li class="list__item"><a class="list__link" href="#"><span>Fourth Lorem ipsum dolor sit amet.</span></a></li>
  <li class="list__item"><a class="list__link" href="#"><span>Fifth</span></a></li>
  <li class="list__item"><a class="list__link" href="#"><span>Sixth</span></a></li>
  <li class="list__item"><a class="list__link" href="#"><span>Seventh</span></a></li>
  <li class="list__item"><a class="list__link" href="#"><span>Eighth Lorem ipsum dolor sit amet.</span></a></li>
</ul>

.list {
  display: flex;
  max-width: 1170px;
  margin: 0 auto;

  &__item {
    padding: 25px 18px;
  }
}

Comments

[Модератор]

Дорогой пользователь, настоятельно рекомендуем еще раз обратить самое пристальное внимание на п. 3.1 регламента работы сервиса (и, в особенности, на его последний абзац).
В противном случае, ваши вопросы будут удаляться по причине тег-спама, а систематические нарушения приведут к блокировке учетной записи.

[Кирилл Романов]

А зачем тут теги Vue, React и Javascript?

[Антон Антон]

при чем тут vue, js и react?

[s24344]

Модератор, Как мне удалить лишние теги?

[ⓒⓢⓢ]

что значит "Не перененосятся слова" и как они должны переноситься?

[s24344]

JRK_DV, Попробуйте данный пример в различных браузерах при resize, а затем тоже самое в IE10.

[ⓒⓢⓢ]

s24344,

при resize

понял, пробуйте указать ширину блока width\flex

[Модератор]

s24344, теги уже поменяли
Впредь, не используйте теги, если они прямо не упоминаются в вопросе

[s24344]

Модератор, хорошо. Я понял Вас.

[s24344]

JRK_DV, важно, чтобы li были по ширине своего контейнера, соответственно задать им строгую ширину в данном случае нельзя.

[ⓒⓢⓢ]

s24344,

задать им строгую ширину в данном случае нельзя.

возможно я не совсем понятно написал, - пробовали добавить "width: 100%" или "flex: 1"?
Если надо то вперемешку с box-size или

width: calc(100% - 36px) // 36 = padding-left+padding-right

[s24344]

JRK_DV, "width: 100%" или "flex: 1", это первое, что я попробовал сделать (не вышло). А вот width: calc(100% - 1px); решило проблему. Спасибо за помощь.

Answer 1

[Dymok]

word-wrap

Comments

[s24344]

word-wrap: break-word; Не решает данной проблемы.

Answer 2

[Александр]

Попробуйте white-space: normal;

Comments

[s24344]

Нет, не помогло.