代码之家 › 专栏 › 技术社区 › Kevin

Angular2材质工具栏-减少多行文字间距

angular-material2 toolbar angular

Kevin · 技术社区 · 7 年前

我有一个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>

1 回复 | 直到 7 年前

Nehal 7 年前

我添加了一些css来换行跨距,这样我们就可以摆脱 <br/> max-height .

<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

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

2 年前

Kael · 在html表格中显示关系api数据-角度

2 年前