Как сократить текст с помощью многоточия и Angular-FlexLayout? - PullRequest
Новая
       33

Как сократить текст с помощью многоточия и Angular-FlexLayout?

0 голосов
/ 17 июня 2019

У меня есть строка flex, которая содержит три строки flex. Во втором у меня есть название, которое не должно быть сокращенным, и текст, который должен быть. Кроме того, первый и последний ряд не должны сжиматься и должны иметь фиксированную ширину.

Я уже пробовал много разных комбинаций flex. Смотрите попытку ниже: 

<div fxFlexLayout="row">
  <div fxFlex="0 0 100px" fxFlexLayout="row">...</div>
  <div fxFlexLayout="row">
    <div>Title:</div>
    <div fxFlexLayout="row" class="truncate">
      This is a very long text which should be truncated!
    </div>
  </div>
  <div fxFlex="0 0 100px" fxFlexLayout="row">...</div>
</div>


.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

1 Ответ

1 голос
/ 17 июня 2019

Для достижения ожидаемого результата установите ширину для элемента с усечением класса, как переполнение текста: многоточие работает только с шириной, указанной вместе с пробел: nowrap и переполнение: скрыто 

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

пример кода - https://stackblitz.com/edit/shrink-text-with-angular-flexlayout-wx6e3s?file=app/app.component.css

...