How do I make a JQuery Mobile header wrap, and left-justified?

Question

The text in my JQuery Mobile headers is often too long to fit on an iPhone screen, which means that the text is truncated, and a button on the right of the header overlaps the text.

Is there any way that I can:

• Make the text wrap instead of run off the right of the screen
• Make the text smaller

Answer 1

It looks like the style that handles the ellipsis and wrapping is this:

.ui-header .ui-title, .ui-footer .ui-title {
    text-overflow: ellipsis;
    white-space: nowrap;
}

Try overriding that in your own style:

.ui-header .ui-title, .ui-footer .ui-title {
    text-overflow: clip;
    white-space: normal;
}