Question

I am rendering HTML locally in an iPad app using jQuery Mobile. The titles are getting “…” ellipses in them, even though there is lots of room. I am using off-the-shelf JQM and JQM CSS classes.

How can I tell JQM to render the full title?

Below is a screen shot with some blue markup.

Here’s the Title:

`<div data-role='header' data-position='inline'>
       <h1>the long title goes here</h1></div>`

Answer 1

The h1 tag gets margin applied that you can overwrite so the title won’t get clipped so much.

.ui-page .ui-header h1 {
    margin-left  : 0;
    margin-right : 0;
}​

Here is a demo: http://jsfiddle.net/ubYWU/

Note that you will want to give left/right margin values that make it so your title won’t overlap with your icon(s).