MD-按鈕調整字體大小以適合按鈕大小

Question

我使用md-button其中包含文本

的問題是，當我在低分辨率的文本被切斷，我無法找到合適的解決方案來解決它

如果你可以請建議如何做到這一點。

我連着在高分辨率和低分辨率的屏幕截圖+ CSS和HTML

<md-dialog id="new_test_draft_dialog" flex=40 flex-md=50 flex-sm=60 flex-xs=80> 
    <div> 
     <div layout-padding> 
      <h2>Save Changes?</h2> 
      <div style="padding:5px;" layout-padding> 
       <div layout="row" layout-align="center center"> 
        <md-button ng-click="draftDialogService.cancel()" class="button_type_1 active">Continue</md-button> 
        <md-button ng-click="draftDialogService.hide()" class="button_type_1 active">Discard</md-button> 
        <md-button ng-click="draftDialogService.hide(saveDraft())" class="button_type_1 active">Save draft</md-button> 
       </div> 
      </div> 
     </div> 
    </div> 
</md-dialog> 

的CSS：

/* Buttons */ 
.button_type.md-button, 
.button_type, 
.button_type_1 { 
    border: 3px solid #fff; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    -moz-background-clip: padding; 
    -webkit-background-clip: padding-box; 
    background-clip: padding-box; 
    padding: 5px 5px; 
    color: #fff; 
    display: inline-block; 
    text-decoration: none; 
    -webkit-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease; 
    -ms-transition: all 0.3s ease; 
    -o-transition: all 0.3s ease; 
    transition: all 0.3s ease; 
    word-wrap: break-word; 
} 

Answer 1

這裏有一個替代解決您的問題 - CodePen

這個想法是根據屏幕大小（響應）更改按鈕的佈局。我認爲這更符合角色材料的做事方式。

標記

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp"> 
    <div layout-gt-xs="row" layout-xs="column" layout-align="center center"> 
    <md-button class="md-raised md-primary">Continue Adding</md-button> 
    <md-button class="md-raised md-primary">Discard Changes</md-button> 
    <md-button class="md-raised md-primary">Save Draft And Exit</md-button> 
    </div> 
</div> 

Angular Material layout