Question

I have a page built with jQuery mobile with header markup that looks like this:

<div data-role="header">
    <h1>The Magnet Puzzle</h1>
</div>

I tested it out in an Android and a Windows phone, and in both it truncates the last three characters of the header text, even though the header is wide enough to fit the entire title:

I want it to look like this instead:

Why is it being truncated, and how can I fix it so that it displays the entire title?

Answer 1

I think the real trouble is that JqMobile is setting the left and right margin to 30% leaving only 40% of the total width for your title. Change that to 10% and you get the ellipsis when you really need it.

.ui-header .ui-title {
    margin-right: 10%;
    margin-left: 10%;
}