如何使用省略号和 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

为了达到预期的结果，设置元素的宽度 class- truncate，因为 text-overflow:ellipsis 仅适用于指定的宽度以及 white-space: 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

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

How to shorten text with ellipsis and Angular-FlexLayout?

html

css

flexbox

angular-flex-layout

angular