Angular2材質工具欄-減少多行文字間距

Question

我有一個用angular2材質制作的工具欄。 左側有應用程序標題，在右側有一些文本行。

我的問題是線之間的間距很大-如何減小線之間的間距？ 請參閱下面的https://plnkr.co/edit/btull6fX1rB4232L4DrW?p=preview/屏幕截圖。

我的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

我添加了一些CSS來使跨行換行，以便我們擺脫<br/> 。 然后將css類添加到所有span中以設置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;
}

編輯的punker