title: angularjs md-tabs with multi line tab heading
body: <p>i have done a web module using angular material tab demos
  and out put is like following
  <a href="https://i.stack.imgur.com/upD4P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/upD4P.png" alt="enter image description here"></a></p>
  
  <p>i want tabs heading(circled with black line) should be in more than one line</p>
  
  <p>i tired everything but got nothing...please help</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;md-tab label="MOBILIZATION SETTINGS" &gt;
          &lt;md-content class="md-padding tab-content" style="padding:0px;"&gt;            &lt;!--in line css  --&gt;
   &lt;div class=" callout-elem-info ng-scope cntrl-div" &gt;
   &lt;div class="main-heading"&gt;
   &lt;h2&gt;Mobilization Settings&lt;/h2&gt;
   &lt;div class="add-button" ng-click="collapsed=!collapsed"&gt;ADD&lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="ElementsToBeAdd" ng-show="collapsed"&gt;
   &lt;ul&gt;
     &lt;a href="#/da/clusterAndSubClusterInfo"&gt; &lt;li&gt;
          CLuster and SubCluster
      &lt;/li&gt;&lt;/a&gt;
      
      &lt;a href="#/da/vehicleModelInfo"&gt;&lt;li&gt;
          Vehicle Model Info
      &lt;/li&gt;&lt;/a&gt;
      
      &lt;a href="#/da/reasonsOfNotInrestedInSmartShift"&gt;&lt;li&gt;
          Reasons Of Not Intrested In SamrtShift
      &lt;/li&gt;&lt;/a&gt;
      
     &lt;a href="#/da/reasonsOfLeavingCompitition"&gt; &lt;li&gt;
         Reasons Of Leaving Compitition
      &lt;/li&gt;&lt;/a&gt;
      
      &lt;a href="#/da/reasonsLtOfNotReadyAsSmartShifter"&gt; &lt;li&gt;
         Reasons Of Lt Not Ready To Operate As SmartShifter
      &lt;/li&gt;&lt;/a&gt;
      
       &lt;a href="#/da/reasonsFoOfNotReadyAsSmartShifter"&gt; &lt;li&gt;
         Reasons Of Fo Not Ready To Operate As SmartShifter
      &lt;/li&gt;&lt;/a&gt;
   &lt;/ul&gt;
   &lt;/div&gt;
   &lt;!-- &lt;div ng-cloak&gt; --&gt;
    &lt;md-content&gt;
      &lt;md-tabs md-dynamic-height md-border-bottom style="height: 500px;"&gt;    &lt;!--in line css  --&gt;
        &lt;md-tab label="Cluster And SubCluster" &gt;
          &lt;md-content class="md-padding tab-content"&gt;
           &lt;!--  &lt;h1 class="md-display-2"&gt;Cluster And SubCluater&lt;/h1&gt; --&gt;       
                 &lt;ul class="allClusterList" &gt;
         &lt;li ng-repeat="obj in allClusterList"&gt;
          &lt;div class="div-in-li"&gt;
          &lt;div class="clusterNameHeading"&gt;&lt;h2&gt;{{$index+1}}.&lt;/h2&gt; &lt;div class="clusterNameObj"&gt;{{obj.clusterName}}&lt;div class="edit-button"&gt;
           &lt;a style="color:white;" href="#/da/clusterAndSubClusterInfo/{{obj.clusterId}}"&gt;EDIT&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;        
          &lt;/div&gt;            
         &lt;/li&gt;
        &lt;/ul&gt;
         
          &lt;/md-content&gt;
        &lt;/md-tab&gt;
        &lt;md-tab label="Not Interested in SmartShift"&gt;
          &lt;md-content class="md-padding"&gt;
            &lt;!-- &lt;h1 class="md-display-2"&gt;Tab Two&lt;/h1&gt; --&gt;
            &lt;ul class="allClusterList"&gt;
      &lt;li ng-repeat="obj in notIntrestedInSmartShiftReasons"&gt;
       &lt;div class="div-in-li"&gt;
         &lt;div class="clusterNameHeading"&gt;&lt;h2&gt;{{$index+1}}.&lt;/h2&gt; &lt;div class="reasonNameObj"&gt;{{obj.reason}}&lt;div class="edit-button"&gt;
         &lt;a style="color:white;" href="#/da/reasonsOfNotInrestedInSmartShift/{{obj.id}}"&gt;EDIT&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
       &lt;/div&gt;    
     &lt;/li&gt;
    &lt;/ul&gt;
            &lt;/md-content&gt;
        &lt;/md-tab&gt;
        &lt;md-tab label="Reasons Of Leaving Compitition"&gt;
          &lt;md-content class="md-padding"&gt;
           &lt;!--  &lt;h1 class="md-display-2"&gt;Tab Three&lt;/h1&gt; --&gt;
            &lt;ul class="allClusterList"&gt;
      &lt;li ng-repeat="obj in reasonsOfLeavingCompitition"&gt;
      &lt;div class="div-in-li"&gt;
      &lt;div class="clusterNameHeading"&gt;&lt;h2&gt;{{$index+1}}.&lt;/h2&gt; &lt;div class="reasonNameObj"&gt;{{obj.reason}}&lt;div class="edit-button"&gt;
      &lt;a style="color:white;" href="#/da/reasonsOfLeavingCompitition/{{obj.reasonId}}"&gt;EDIT&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;/div&gt;
  
     &lt;/li&gt;
    &lt;/ul&gt;
            &lt;/md-content&gt;
        &lt;/md-tab&gt;
        &lt;md-tab label="Vehicle Model Info"&gt;
          &lt;md-content class="md-padding"&gt;
            &lt;!-- &lt;h1 class="md-display-2"&gt;Tab Three&lt;/h1&gt; --&gt;
             &lt;ul class="allClusterList"&gt;
      &lt;li ng-repeat="obj in vehicleInfoList"&gt;
         &lt;div class="div-in-li"&gt;
         &lt;div class="clusterNameHeading"&gt;&lt;h2&gt;{{$index+1}}.&lt;/h2&gt; &lt;div class="vehicleModelNameObj"&gt;{{obj.modelName}}&lt;div class="edit-button"&gt;
         &lt;a style="color:white;" href="#/da/vehicleModelInfo/{{obj.vehicleModelId}}"&gt;EDIT&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;  
         &lt;/div&gt;
      
     &lt;/li&gt;
    &lt;/ul&gt;
            &lt;/md-content&gt;
        &lt;/md-tab&gt;
        &lt;md-tab label="Reasons Of Lt Not Ready To Operate As SmartShifter"&gt;
          &lt;md-content class="md-padding"&gt;
           &lt;!--  &lt;h1 class="md-display-2"&gt;Tab Three&lt;/h1&gt; --&gt;
            &lt;ul class="allClusterList"&gt;
      &lt;li ng-repeat="obj in reasonsOfNotReadyAsSmartShifter"&gt;
         &lt;div class="div-in-li"&gt;
          &lt;div class="clusterNameHeading"&gt;&lt;h2&gt;{{$index+1}}.&lt;/h2&gt; &lt;div class="reasonNameObj"&gt;{{obj.reason}}&lt;div class="edit-button"&gt;
         &lt;a style="color:white;" href="#/da/ReasonsOfLtNotReadyToOperateAsSmartShifter/{{obj.notReadyToOperateAsSmartShiftId}}"&gt;EDIT&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
          
         &lt;/div&gt;
      
     &lt;/li&gt;
    &lt;/ul&gt;
            &lt;/md-content&gt;
        &lt;/md-tab&gt;
        
         
         &lt;md-tab label="Reasons Of Fo Not Ready To Operate As SmartShifter"&gt;
          &lt;md-content class="md-padding"&gt;
            &lt;!-- &lt;h1 class="md-display-2"&gt;Tab Two&lt;/h1&gt; --&gt;
            &lt;ul class="allClusterList"&gt;
      &lt;li ng-repeat="obj in reasonsOfFoNotReadyAsSmartShifter"&gt;
       &lt;div class="div-in-li"&gt;
         &lt;div class="clusterNameHeading"&gt;&lt;h2&gt;{{$index+1}}.&lt;/h2&gt; &lt;div class="reasonNameObj"&gt;{{obj.reason}}&lt;div class="edit-button"&gt;
         &lt;a style="color:white;" href="#/da/jobCreationCity/{{obj.id}}"&gt;EDIT&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
       &lt;/div&gt;    
     &lt;/li&gt;
    &lt;/ul&gt;
            &lt;/md-content&gt;
        &lt;/md-tab&gt;
      &lt;/md-tabs&gt;
    &lt;/md-content&gt;
  &lt;!-- &lt;/div&gt; --&gt;
   
   
   &lt;/div&gt;
   &lt;/md-content&gt;
   &lt;/md-tab&gt;</code></pre>
  </div>
  </div>
  </p>