Search code examples
cssionic-frameworkionic2ionic3

How to wrap the text in <ion-segment-button> in Ionic 2

Trying the wrap the 2words in ion segment button.I am doing something like this:

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

Added following css :

.segment{
   height: 70px;

  .button{
     height: 50px;
  }
}

But getting the view like following - how to reduce vertical spacing? enter image description here

Solution

  • The segments do not look great with so much text but I tried to play with what you want and this sass looks pretty god.

      ion-segment-button {
    min-height: 70px;
    line-height: 1.5rem !important;

    padding-left: 0px;
    padding-right: 0px;

  }