html - 按钮栏内的文本格式

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 标签或以任何方式分隔字符串，因为在实际情况下我是从翻译表中获取字符串的。代码笔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