Форум

s24344 · #1 (**permalink**) 23.07.2018, 09:05

Всем привет. Столкнулся со следующей проблемой. Если кто-нибудь сталкивался, подскажите пожалуйста.

<a href="#">
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</a>

Если у тега a (в данном случае) установлено свойство: display: flex, то текст в IE не переносится на новую строку. Как данную проблему решить?

ksa · #2 (**permalink**) 23.07.2018, 10:34

Сообщение от s24344

текст в IE не переносится на новую строку

У меня переносится...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='https://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
a {
	display: flex;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<a href="#">
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</a>
</body>
</html>

s24344 · #3 (**permalink**) 24.07.2018, 13:31

Простите, я привел не корректный пример. Ниже приведена верска с существующей проблемой в 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;
  }
}

ksa · #4 (**permalink**) 25.07.2018, 09:44

Сообщение от s24344

Ниже приведена верска с существующей проблемой в IE10

ИЕ10 видать положил на Флекс с прибором.

Альтернативный вариант.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='https://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
.list {
	border: 1px solid;
	max-width: 1170px;
	margin: 0 auto;
}
.list__item {
	vertical-align: top;
	padding: 25px 18px;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<table class="list">
	<tr>
	<td class="list__item"><a class="list__link" href="#"><span>First</span></a></td>
	<td class="list__item"><a class="list__link" href="#"><span>Second</span></a></td>
	<td class="list__item"><a class="list__link" href="#"><span>Third</span></a></td>
	<td class="list__item"><a class="list__link" href="#"><span>Fourth Lorem ipsum dolor sit amet.</span></a></td>
	<td class="list__item"><a class="list__link" href="#"><span>Fifth</span></a></td>
	<td class="list__item"><a class="list__link" href="#"><span>Sixth</span></a></td>
	<td class="list__item"><a class="list__link" href="#"><span>Seventh</span></a></td>
	<td class="list__item"><a class="list__link" href="#"><span>Eighth Lorem ipsum dolor sit amet.</span></a></td>
	</tr>
</table>
</body>
</html>

ksa · #5 (**permalink**) 25.07.2018, 09:47

Сообщение от ksa

ИЕ видать положил на Флекс с прибором.

Так и есть...
https://caniuse.com/#search=flexbox

s24344 · #6 (**permalink**) 25.07.2018, 15:14

Спасибо.

i.Bes · #7 (**permalink**) 28.02.2019, 17:29

&__item {
    padding: 25px 18px;
    flex: 1 1 auto;
}

Форум

Справочник

Discord чат

Курсы javascript