按钮栏内的文本格式化

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