angularjs md-tabs带有多行标签标题

Question

我使用角度材料选项卡演示完成了一个Web模块 并且输出就像是以下

我希望标签标题（用黑线圈出）应该在多行中

我厌倦了一切但什么都没有......请帮忙

＆＃13;

＆＃13;

 <md-tab label="MOBILIZATION SETTINGS" >
        <md-content class="md-padding tab-content" style="padding:0px;">            <!--in line css  -->
	<div class=" callout-elem-info ng-scope cntrl-div" >
	<div class="main-heading">
	<h2>Mobilization Settings</h2>
	<div class="add-button" ng-click="collapsed=!collapsed">ADD</div>
	</div>
	<div class="ElementsToBeAdd" ng-show="collapsed">
	<ul>
	  <a href="#/da/clusterAndSubClusterInfo"> <li>
	       CLuster and SubCluster
	   </li></a>
	   
	   <a href="#/da/vehicleModelInfo"><li>
	       Vehicle Model Info
	   </li></a>
	   
	   <a href="#/da/reasonsOfNotInrestedInSmartShift"><li>
	       Reasons Of Not Intrested In SamrtShift
	   </li></a>
	   
	  <a href="#/da/reasonsOfLeavingCompitition"> <li>
	      Reasons Of Leaving Compitition
	   </li></a>
	   
	   <a href="#/da/reasonsLtOfNotReadyAsSmartShifter"> <li>
	      Reasons Of Lt Not Ready To Operate As SmartShifter
	   </li></a>
	   
	    <a href="#/da/reasonsFoOfNotReadyAsSmartShifter"> <li>
	      Reasons Of Fo Not Ready To Operate As SmartShifter
	   </li></a>
	</ul>
	</div>
	<!-- <div ng-cloak> -->
  <md-content>
    <md-tabs md-dynamic-height md-border-bottom style="height: 500px;">    <!--in line css  -->
      <md-tab label="Cluster And SubCluster" >
        <md-content class="md-padding tab-content">
         <!--  <h1 class="md-display-2">Cluster And SubCluater</h1> -->       
               <ul class="allClusterList" >
				   <li ng-repeat="obj in allClusterList">
					   <div class="div-in-li">
					   <div class="clusterNameHeading"><h2>{{$index+1}}.</h2> <div class="clusterNameObj">{{obj.clusterName}}<div class="edit-button">
					    <a style="color:white;" href="#/da/clusterAndSubClusterInfo/{{obj.clusterId}}">EDIT</a></div></div></div>					   
					   </div>					       
				   </li>
			   </ul>
       
        </md-content>
      </md-tab>
      <md-tab label="Not Interested in SmartShift">
        <md-content class="md-padding">
          <!-- <h1 class="md-display-2">Tab Two</h1> -->
          <ul class="allClusterList">
			 <li ng-repeat="obj in notIntrestedInSmartShiftReasons">
			  <div class="div-in-li">
			    <div class="clusterNameHeading"><h2>{{$index+1}}.</h2> <div class="reasonNameObj">{{obj.reason}}<div class="edit-button">
			    <a style="color:white;" href="#/da/reasonsOfNotInrestedInSmartShift/{{obj.id}}">EDIT</a></div></div></div>
			  </div>				
			</li>
		</ul>
          </md-content>
      </md-tab>
      <md-tab label="Reasons Of Leaving Compitition">
        <md-content class="md-padding">
         <!--  <h1 class="md-display-2">Tab Three</h1> -->
          <ul class="allClusterList">
			 <li ng-repeat="obj in reasonsOfLeavingCompitition">
			 <div class="div-in-li">
			 <div class="clusterNameHeading"><h2>{{$index+1}}.</h2> <div class="reasonNameObj">{{obj.reason}}<div class="edit-button">
			 <a style="color:white;" href="#/da/reasonsOfLeavingCompitition/{{obj.reasonId}}">EDIT</a></div></div></div>
			 </div>

			</li>
		</ul>
          </md-content>
      </md-tab>
      <md-tab label="Vehicle Model Info">
        <md-content class="md-padding">
          <!-- <h1 class="md-display-2">Tab Three</h1> -->
           <ul class="allClusterList">
			 <li ng-repeat="obj in vehicleInfoList">
			    <div class="div-in-li">
			    <div class="clusterNameHeading"><h2>{{$index+1}}.</h2> <div class="vehicleModelNameObj">{{obj.modelName}}<div class="edit-button">
			    <a style="color:white;" href="#/da/vehicleModelInfo/{{obj.vehicleModelId}}">EDIT</a></div></div></div>  
			    </div>
				
			</li>
		</ul>
          </md-content>
      </md-tab>
      <md-tab label="Reasons Of Lt Not Ready To Operate As SmartShifter">
        <md-content class="md-padding">
         <!--  <h1 class="md-display-2">Tab Three</h1> -->
          <ul class="allClusterList">
			 <li ng-repeat="obj in reasonsOfNotReadyAsSmartShifter">
			    <div class="div-in-li">
			     <div class="clusterNameHeading"><h2>{{$index+1}}.</h2> <div class="reasonNameObj">{{obj.reason}}<div class="edit-button">
			    <a style="color:white;" href="#/da/ReasonsOfLtNotReadyToOperateAsSmartShifter/{{obj.notReadyToOperateAsSmartShiftId}}">EDIT</a></div></div></div>
					   
			    </div>
				
			</li>
		</ul>
          </md-content>
      </md-tab>
      
       
       <md-tab label="Reasons Of Fo Not Ready To Operate As SmartShifter">
        <md-content class="md-padding">
          <!-- <h1 class="md-display-2">Tab Two</h1> -->
          <ul class="allClusterList">
			 <li ng-repeat="obj in reasonsOfFoNotReadyAsSmartShifter">
			  <div class="div-in-li">
			    <div class="clusterNameHeading"><h2>{{$index+1}}.</h2> <div class="reasonNameObj">{{obj.reason}}<div class="edit-button">
			    <a style="color:white;" href="#/da/jobCreationCity/{{obj.id}}">EDIT</a></div></div></div>
			  </div>				
			</li>
		</ul>
          </md-content>
      </md-tab>
    </md-tabs>
  </md-content>
<!-- </div> -->
	
	
	</div>
	</md-content>
	</md-tab>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试：

<md-tab>
 <md-tab-label> 
  My Label HTML <!-- try your HTML here to make multi-line -->
 </md-tab-label>
 <md-tab-body> <!-- this tag is now required -->
  My Body HTML
 </md-tab-body>
</md-tab>