1

Добрый вечер.

Не могу понять в чем проблема. Не совсем корректно работает свойство flex-shrink на планшете с андроид и ios, не работает только для стандартных браузеров, в хроме все ок.

В блок шириной 25% от общей ширины экрана помещена строка, а в строку три ссылки. При адаптации страницы, что бы ничего не переходило на новуюс троку или за пределы блока было использовано:

<span class="style">
 <a class="user-name" title=""></a>/
 <a class="user-type" title=""></a>/
 <a class="user-status" title=""></a>
</span>


.style {
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
 width: 100%;
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
}

и на первую ссылку из строки:

.user-name {
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}

На вторую и третью ссылки - ничего. На ПК, телефоне, iPad отрабатывает так, т.е. сокращает первую часть текста так, что бы влезло все остальное (текст из двух других ссылок).

введите сюда описание изображения

А на андроид выглядит так:

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

Надеюсь, что понятно описала. Заранее спасибо всем.

0

Ваш ответ

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

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