Question

50

Why is my header text being truncated?

rated 0 times [ 52] [ 2] / answers: 1 / hits: 18122 / 13 Years ago, tue, january 3, 2012, 12:00:00

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:

turncated

I want it to look like this instead:

full

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

stacie

Add To Favorites

Follow

Total Points: 476

Total Questions: 92

Total Answers: 102

Location: Bosnia and Herzegovina

Member since Tue, Mar 29, 2022

2 Years ago

answered 13 Years ago mckaylab · Accepted Answer

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

}