Angular 2 material: Show full text for the list items

Question

I have the following code:

    <md-list dense>
  <md-list-item *ngFor="let message of chatMessages | async">
    <p md-line>
      <span> {{message.content}} </span>
    </p>
  </md-list-item>
</md-list>

That outputs this:

My message is c...

instead of:

My message is cool message

How I can show all of the text of each md list item when using <md-list>?

Answer 1

md-list md-list-item [md-line] has the css attributes:

    text-overflow: ellipsis
    white-space: wrap

This truncates any extra text that doesn't fit in the container. It only displays the ellipsis (...) if the text can't fit in the container.

Either make your container larger, or override with white-space: normal which will wrap any extra text onto additional lines

Answer 2

<p md-line class="wrap">
  <span> {{message.content}} </span>
</p>

Add a class and override the md-line styles.

md-list md-list-item [md-line].wrap {white-space: normal}

Inspect the element to see existing styles, and current style will be mostly visible as below. Use the override style given above to override the styles.

.mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { styles }