Angular2 Material Toolbar - reduzieren mehrzeiligen Textabstand

Question

Ich habe eine Symbolleiste in angular2 Material. Linke Seite hat App-Titel, und auf der rechten Seite möchte ich einige Textzeilen haben.

Mein Problem ist, dass der Abstand zwischen den Zeilen sehr groß ist - wie reduziere ich diesen Abstand zwischen den Zeilen? Siehe die https://plnkr.co/edit/btull6fX1rB4232L4DrW?p=preview/Screenshot unten.

Mein html:

<md-toolbar color="primary"> 
    <p>AppTitle</p> 

    <!-- fill remaining space --> 
    <span style="flex: 1 1 auto;"></span> 

    <!-- QUESTION: --> 
    <!-- HOW CAN I REDUCE SPACE BETWEEN LINES --> 
    <p style="font-size: x-small;"> 
    <span >Line1</span> 
    <br/> 
    <span >Line2</span> 
    <br/> 
    <span>Line3</span> 
    </p> 

</md-toolbar> 

Answer 1

Ich habe einige CSS hinzugefügt, um die Spannweiten der Leitung-zu brechen, so dass wir von der <br/> loswerden können. Dann wurde allen Bereichen eine CSS-Klasse hinzugefügt, um die max-height festzulegen.

html:

<md-toolbar color="primary"> 
    <p>AppTitle</p> 

    <span style="flex: 1 1 auto;"></span> 

    <div class="far-end"> 
    <span class="space-reducer">Line1</span> 
    <span class="space-reducer">Line2</span> 
    <span class="space-reducer">Line3</span> 
    </div> 
</md-toolbar> 

css:

.far-end{ 
    font-size: x-small; 
    display: inline-grid; 
    margin-bottom: auto; 
} 

.space-reducer{ 
    max-height: 14px; 
} 

Edited plunker