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类来设置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