I have a problem with the formatting of a text string inside a button in a button-bar in Ionic. I want to set a max-width of the text inside the button, such that the last word goes down on a separate row but couldn't make it work using 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>
I want the last word "cats" in the first button go down on a separate row. I can't use any html tags or separate the string in any way, since in the real scenario I am getting the string from a translation table. Codepen here
White-space CSS did the trick.
<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>
You can refer to the updated codepen here