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 places three dots like here:
here

i found a little workarround that these dots don’t show up like here (white-space:normal didn’t work for me)
here

has somone an idea how i can make it do auto line breaks ?

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.