Angular2マテリアルツールバー - 複数行のテキストスペースを減らす

Question

私はangular2素材でツールバーを持っています。左側にはアプリのタイトルがあり、右側にはテキストの行があります。

私の問題は、行の間隔が大きいことです。行間のこの間隔をどのように減らすのですか？下記のhttps://plnkr.co/edit/btull6fX1rB4232L4DrW?p=preview/screenshotを参照してください。

私の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

我々は<br/>を取り除くことができるように私は、改行するスパンを、いくつかのCSSを追加しました。その後、すべてのスパンにCSSクラスを追加してmax-heightを設定します。

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