CODEWITHSUNDEEP
htmlcssangularflexboxangular-flex-layout
JuNe
JuNe

Reputation: 1997

How to shorten text with ellipsis and Angular-FlexLayout?

I have a flex row which contains three flex rows. In the second one i have a title which shouldn´t be shortn and a text which should be. Also the first and last row shouldn´t shrink and should also have a fixed width.

I have already tried a lot of different combinations of flex. See attempt below:

<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;
}

Upvotes: 2

Views: 7573

Answers (1)

Naga Sai A
Naga Sai A

Reputation: 10975

To achieve expected result, set width for element with class- truncate,as text-overflow:ellipsis works only with width specified along with white-space: nowrap and overflow: hidden

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

code sample - https://stackblitz.com/edit/shrink-text-with-angular-flexlayout-wx6e3s?file=app/app.component.css

Upvotes: 4

Related Questions