CODEWITHSUNDEEP
angulartoolbarangular-material2
Kevin
Kevin

Reputation: 11662

Angular2 Material Toolbar - reduce multi-line text spacing

I have a toolbar in angular2 material. 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.

enter image description here

My 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>

Upvotes: 0

Views: 1490

Answers (1)

Nehal
Nehal

Reputation: 13297

I have added some css to line-break the spans, so that we can get rid of the <br/>. Then added a css class to all spans to set the max-height.

enter image description here

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

Upvotes: 1

Related Questions