按鈕欄內的文本格式化

Question

我在Ionic的button-bar中對button內的文本字符串進行格式設置時遇到問題。我想在按鈕內部設置文本的最大寬度，以便最後一個單詞在單獨的行上下移，但無法使用css工作。

<div class="button-bar"> 
    <a class="button" ng-click="data.filter='cat'">Cats cats and more cats</a> 
    <a class="button" ng-click="data.filter='dog'">Dogs</a> 
    <a class="button" ng-click="data.filter='bird'">Birds</a> 
</div>  

我希望第一個按鈕中的最後一個單詞「cats」落在單獨的一行上。我無法以任何方式使用任何html標記或分隔字符串，因爲在真實場景中，我從轉換表中獲取字符串。 Codepen here

Answer 1

白色空間CSS做了詭計。

<div class="button-bar"> 
    <a class="button" style="white-space:normal" ng-click="data.filter='cat'">Cats cats and more cats</a> 
    <a class="button" ng-click="data.filter='dog'">Dogs</a> 
    <a class="button" ng-click="data.filter='bird'">Birds</a> 
</div>  

您可以參閱更新codepen here