Angular2 Material 工具栏 - 减少 multi-line 文本间距

Question

我在 angular2 中有一个工具栏 material。左侧有应用程序标题，在右侧我想要一些文本行。

我的问题是线条之间的间距很大 - 如何缩小线条之间的间距？请参阅下面的 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/>。然后给所有的span添加一个css class来设置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

Angular2 Material 工具栏 - 减少 multi-line 文本间距

Angular2 Material Toolbar - reduce multi-line text spacing

toolbar

angular-material2

angular