JQuery Mobile <h1> Titles cut off?

Question

I am having problem with the title of a header in my jquery code.

Basically after the 3rd character of the title I'm getting ... I'd like to display the whole title.

Why is it cutting it off and how can I fix this?

Answer 1

A proper CSS solution is described in point 4 here

http://www.webdesignerdepot.com/2011/05/10-handy-jquery-mobile-tips-and-snippets-to-get-you-started/

For list items add:

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

For footer content add:

body .ui-footer .ui-title {
 white-space: normal;
}

Or take a look at this workaround

http://operationmobile.com/how-to-stop-your-jquery-mobile-header-from-being-cut/

Answer 2

Here's the solution I used:

<style>
    .ui-header .ui-title {
        margin-right: 0px;
        margin-left: 0px;
    }
</style>

Note that this probably only works because I don't have anything else in my title bar, such as buttons. If you just use white-space: normal; you get text that line wraps, but still takes up two lines. (which is what I was trying to avoid by using margin-*.)