Текстовый многоточие в гибкой колонне - PullRequest
Новая
       0

Текстовый многоточие в гибкой колонне

0 голосов
/ 19 сентября 2019

Я пытаюсь заставить текстовый многоточие работать в макете гибкого столбца, внутри гибкой строки.Вариант использования будет для чего-то вроде вкладок со значками - все вкладки должны помещаться в строке и, возможно, быть усеченными, а вкладки имеют внутреннее расположение столбцов, поэтому значок располагается над текстом.

ЭтоМожно заставить работать корректно размеры, но я не могу найти способ заставить усечение работать, сохраняя гибкость по горизонтали.

Я создал этот plunkr , чтобы продемонстрировать -как вы можете видеть в обоих вариантах, растяжение работает правильно, а упаковщики строк / столбцов сокращаются, чтобы соответствовать контейнеру, но многоточие текста перестает работать, как только вы переключаете оболочку на столбец. 

<!DOCTYPE html>
<html>

<head>
</head>

<body>
<style>
.wrapper {
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 16px;
  width: 100%;
  max-width: 250px;
}

.column-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 100px;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
}

.row-wrapper {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
}

.ellipsis {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap
}
</style>

<div class="wrapper">
  <div class="column-wrapper">
    <p class="ellipsis">This is some very long text</p>
  </div>
  <div class="column-wrapper">
    <p class="ellipsis">This is some very long text</p>
  </div>
</div>
<div class="wrapper">
  <div class="row-wrapper">
    <p class="ellipsis">This is some very long text</p>
  </div>
  <div class="row-wrapper">
    <p class="ellipsis">This is some very long text</p>
  </div>
</div>
</body>
</html>

Желаемый результат заключается в том, что внутренний столбец усекается так же, как и внутренний ряд.Очевидно, это все еще должен быть столбец для поддержки значков и т. Д.

К вашему сведению, это основная проблема для https://github.com/ionic-team/ionic/issues/16532

К вашему сведению2, это можно получить, используя display: block вместо display: flex для оболочек столбцов, но это не будет поддерживать другие необходимые сценарии использования для этих контейнеров.

1 Ответ

0 голосов
/ 19 сентября 2019

Вы можете удалить align-items: center из вашего column-wrapper и, возможно, центрировать элементы другим способом.Или, если вы хотите получить результат из первого примера, просто удалите align-items: center, и это должно быть хорошо 

/* Styles go here */
.wrapper {
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 16px;
  width: 100%;
  max-width: 350px;
}

.column-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 100px;
  justify-content: center;
  width: 100%;
  min-width: 0;
}

.row-wrapper {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
}

.ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <h2>Internal row</h2>
    
    <div class="wrapper">
      <div class="row-wrapper">
        <p class="ellipsis">This is some very long text</p>
      </div>
      <div class="row-wrapper">
        <p class="ellipsis">This is some very long text</p>
      </div>
      <div class="row-wrapper">
        <p class="ellipsis">This is some very long text</p>
      </div>
    </div>
    
    <h2>Internal column</h2>
    
    <div class="wrapper">
      <div class="column-wrapper">
        <p class="ellipsis">This is some very long text</p>
      </div>
      <div class="column-wrapper">
        <p class="ellipsis">This is some very long text</p>
      </div>
      <div class="column-wrapper">
        <p class="ellipsis">This is some very long text</p>
      </div>
    </div>
  </body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...