jquery mobile button text auto line break

Question

I want that the text in my button makes an automatic line break when it reaches the end of the button. When i us the normal jquery mobile style it truncates my text and plac

Answer 1

You can't line break a single word in < CSS3 but there's a new css keyword in CSS3 called word-break that allows you to. This will obviously only work in CSS3 browsers.

Give your button a css class, if you want this to only apply to a single button, such as:

<a data-role="button" class='myButton'>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a>

Then create a css style like this:

.myButton
{
   word-wrap: break-word !important;
   white-space: normal !important;
}

This will then wrap the word around into the specified width of the button.

Here's an updated jsFiddle example to demonstrate.