Левый и правый разрыв слова в IE11
Я бы хотел получить такое поведение в Internet Explorer 11
В Chrome и Firefox слова переносятся влево и вправо при выравнивании по центру flexbox. В IE11 текст обтекания находится только справа. Посмотрите изображения, чтобы увидеть разницу в IE11.
¿Как добиться поведения Chrome и Firefox в IE11? Спасибо !!
div {
width: 150px;
border: 1px solid #000000;
display: flex;
justify-content: center;
align-items: center;
}<h1>The word-wrap Property</h1>
<h2>word-wrap: normal (default):</h2>
<div> This div contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</div>
Ответы 2
Это обычная ошибка в IE.
Вы могли видеть, что flex частично поддерживается в IE из: https://caniuse.com/#feat=flexbox
Вы также можете найти общие гибкие ошибки и связанные обходные пути по адресу: https://github.com/philipwalton/flexbugs
Я изменил часть вашего кода, и, возможно, вы могли бы сослаться на:
CSS.
.outer {
width: 150px;
border: 1px solid #000000;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.inner {
box-sizing: border-box;
max-width: 100%;
}
HTML.
<h1>The word-wrap Property</h1>
<h2>word-wrap: normal (default):</h2>
<div class = "outer">
<div class = "inner">
This div contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
</div>
</div>
Вы можете использовать инструменты разработчика F12, чтобы проверить высоту и ширину, показанные в Chrome. Кажется, что Chrome может регулировать высоту и ширину автоматически, а IE - нет. И вы можете установить .inner {height: 72px; width: 276px;}. Результирующее изображение i.stack.imgur.com/Y3x0t.png
Привет, Дженифер, вы можете создать демонстрационный фрагмент кода. Я не могу воспроизвести ваше решение, спасибо!
УХ ТЫ !!! Дженифер, ЭТО РЕШЕНИЕ, ключ заключается в использовании flex-direction: столбец для преодоления ограничений div. Много поцелуев для тебя.
Для IE11 решение - используйте flex-direction: column;Образец кода
Спасибо, Дженифер, я ищу обратный результат, то есть мне нужно разбить div влево и вправо в IE, например в браузерах Chrome и Firefox.