[英]Angular2 Material Toolbar - reduce multi-line text spacing
I have a toolbar in angular2 material. 我有一个用angular2材质制作的工具栏。 Left side has app title, and on the right hand side I want to have some lines of text. 左侧有应用程序标题,在右侧有一些文本行。
My problem is that the spacing between the lines is huge - how do I reduce this spacing between the lines? 我的问题是线之间的间距很大-如何减小线之间的间距? See the https://plnkr.co/edit/btull6fX1rB4232L4DrW?p=preview / screenshot below. 请参阅下面的https://plnkr.co/edit/btull6fX1rB4232L4DrW?p=preview/屏幕截图。
My html: 我的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>
I have added some css to line-break the spans, so that we can get rid of the <br/>
. 我添加了一些CSS来使跨行换行,以便我们摆脱<br/>
。 Then added a css class to all spans to set the max-height
. 然后将css类添加到所有span中以设置max-height
。
html: 的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: CSS:
.far-end{
font-size: x-small;
display: inline-grid;
margin-bottom: auto;
}
.space-reducer{
max-height: 14px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.