Angularjs中的按鈕文字環繞

Question

目標：我有一長文本保存在一個變量中，我需要在按鈕中顯示爲文本。由於它是一個很長的文本，我想包裝它。
示例：
說變量是$scope.buttonText，包含一個長文本（比如說100個字符）。
（角材料使用）視圖中的按鈕的代碼是：

<md-button ng-click="someFunc()" style="width:300px;"> 
{{buttonText}} 
</md-button> 

的期望輸出是，在按鈕上的文字應該300像素後換行。
但上述代碼的實際輸出是文本在300px之後沒有包裝。它只是繼續並打破按鈕。溢出的文本被隱藏起來。
現在，我已經嘗試使用它的一些CSS屬性，如white-space: normal;，但它似乎不工作的文字。
我認爲這是因爲文本實際上是一個$scope變量。
有人可以幫我把按鈕中的文字包起來，它的固定寬度爲300px？高度沒有問題。
A PLUNKR重新生成問題。請有人建議更改。

Answer 1

.appText { 
 
    width: 280px; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
     display: inline-block; 
 
}

<button style="width:300px;"> 
 
<span class="appText">sssssssssssssssssssxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxsssssssssssssssss</span> 
 
</button>