jquery mobile header cut off

Question

in jquery mobile, header lines get cut off when the text is too long, for example "a long text" may turn to "a lon..." on a small device.

I already found a solution to prevent this by setting

body .ui-li .ui-li-desc {
  white-space: normal;
}

but this just wraps the text to the next line even if there is plenty of space in the header line to the left and the right (there is approximately just one third of the space reserved for the header text).

On small devices this will result in a header line with 3 or more rows, using a big part of the screen.

Is there a solution where the header text fits better to the available heading line space?

Answer 1

Use this css and set your left and right percentage (change 10% to any other number)

.ui-title {
    margin: 0.6em 10% 0.8em !important;
}

in case you want different values on different sides use this css:

.ui-title {
    margin: 0.6em 10% 0.8em 5% !important;
}

Also if possible give every header an id because mentioned css will change every element using .ui-title class.

Here's an example: http://jsfiddle.net/Gajotres/QP9qm/2/