Angular 2 Material: Show Volltext für die Listeneinträge

Question

Ich habe den folgenden 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> 

, dass diese Ausgänge:

Meine Botschaft ist c ...

anstelle von:

Meine Nachricht ist cool Nachricht

Wie ich den gesamten Text jedes md Listenelement zeigen wenn <md-list> mit?

Answer 1

md-list md-list-item [md-line] hat die CSS-Attribute:

text-overflow: ellipsis 
    white-space: wrap 

Dies keine zusätzlichen Text abschneidet, die nicht in den Behälter passt. Es werden nur die Auslassungszeichen (...) angezeigt, wenn der Text nicht in den Container passt.

Entweder Ihr Behälter größer machen, oder mit white-space: normal außer Kraft setzen, die

Answer 2

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

eine Klasse hinzufügen und überschreiben die md-Linienstile alle zusätzlichen Text auf zusätzliche Zeilen umbrochen wird.

Untersuchen Sie das Element, um vorhandene Stile zu sehen, und der aktuelle Stil wird hauptsächlich wie unten angezeigt. Verwenden Sie den oben angegebenen Überschreibungsstil, um die Stile zu überschreiben.

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

Answer 3

Inline-Styling. d. h .:

<p matLine style="white-space: normal;"> 
    <span> Lorem ipsum dolor sit amet</span> 
</p>