如何在Ionic 2中的<ion-segment-button>中包装文本

Question

尝试在离子段按钮中包装2个字。我正在做这样的事情：

<ion-segment  class="segment">
      <ion-segment-button class = "button"  value="v1" tappable>
         <div text-wrap>Service Gaurantee</div>
      </ion-segment-button>
      <ion-segment-button class = "button" value="v2" tappable>
        <div text-wrap>Service Request</div>
      </ion-segment-button>
      <ion-segment-button class = "button" value="v3" tappable>
        <div text-wrap>How it works</div>
      </ion-segment-button>
      <ion-segment-button class = "button" value="v4" tappable>
        <div text-wrap>Understand services</div>
     </ion-segment-button>
  </ion-segment>

添加了以下css：

.segment{
   height: 70px;

  .button{
     height: 50px;
  }
}

但是获得如下视图 - 如何减少垂直间距？

Answer 1

这些片段在文字太多的情况下看起来并不好看，但我试着玩你想要的东西，这个sass看起来很神。

{{1}}