div не сжимается при переносе текста - PullRequest
Новая
       28

div не сжимается при переносе текста

0 голосов
/ 18 февраля 2019

Я пытаюсь создать макет строки заголовка, который состоит из 3 частей:

  1. left: заголовок, который может содержать длинный текст, который может быть усечен
  2. center: sub-титл, который не должен быть усечен, а перенесен на новую строку
  3. вправо: фиксированная часть (например, для кнопки меню)

Это в основном работает, но центрированный div делаетне сжиматься, как ожидалось, поэтому он теряет некоторое количество пробела (см. метку красного прямоугольника):

enter image description here

Вот полный пример StackBlitz

релевантный html: 

<div fxLayout="row" fxLayoutAlign="start center">
    <mat-card fxFlex>
        <div fxLayout="row" fxLayoutAlign="space-between center">
            <div class="truncate-line">Long text can be truncated</div>
            <div fxFlex="nogrow" class="action-blurb">multiple lines</div>
            <div fxFlex="none" class="action-blurb">&nbsp;|&nbsp;</div>
        </div>
    </mat-card>
</div>

связанный css: 

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

Поскольку nogrow совпадает с flex: 0 1 auto (то есть: grow =0, shrink = 1, base = auto), я ожидаю, что центрированный div будет уменьшаться при необходимости, но это не так.
Чего мне не хватает?

1 Ответ

0 голосов
/ 20 февраля 2019

После нескольких разочаровывающих часов исследований выяснилось, что угловой flex-layout имеет множество проблем, особенно связанных с flex-base и min / max-width: # 748 , # 438 , # 689 , # 737 , # 729 , # 884

Мой вывод - вообще не использовать fxFlex, а полагаться на свойства css flex.
С чистым CSS легко сделать то, что я ожидаю: Пример с фиксированным стеком

enter image description here

Соответствующий код для среднего предмета: 

<div style="background-color: orange; flex: 1 1 70px; min-width: 60px">multiple lines</div>
...