如何用省略号和Angular-FlexLayout缩短文本？

Question

我有一个弹性行，其中包含三个弹性行。在第二个中，我有一个标题，不应缩短，而一个文本则应是。此外，第一行和最后一行都不应收缩，并且宽度也应固定。

我已经尝试了很多不同的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;
}

Answer 1

要获得预期结果，请使用classtruncate设置元素的宽度，因为text-overflow：省略号仅在指定宽度以及空白：nowrap 和 overflow：隐藏< / strong>

.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