Why is my header text being truncated?

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%;
}

Answer 2

It's being truncated because of jQuery Mobile's CSS for .ui-header .ui-title, which sets the overflow to hidden, the white-space to nowrap and the text-overflow to ellipsis.

I'm not sure if there is a better way to do this, but you can override the jQuery mobile CSS like so:

.ui-header .ui-title {
  overflow: visible !important;
  white-space: normal !important;
}

This question has been asked before with the same answer.