jQuery Mobile title limit

What is the limit for j开发者_Go百科Query mobile titles? How many characters? How do we change this limit? Working with jQuery mobile. Thanks.

You can override the left & right margins on the .ui-title class to give yourself some more space, but be careful because the margins are used to make sure the text doesn't interfere with any left & right buttons you have in the header.

.ui-header .ui-title { margin-left: 1em; margin-right: 1em; }

You might also get a bit more space using clip rather than elipsis:

.ui-header .ui-title { text-overflow: clip; }

If you're worried about your header/title being cut check out the following posts:

How to stop your jQuery Mobile Header from being cut

Stop your jQuery Mobile Header from being cut using white-space normal

Old question, but a google search took me here so I figured I'd post my solution for others.

I choose to override the CSS to force line wrapping, while reserving the space for buttons. I did so by adding

.ui-header .ui-title {
    white-space: normal;
}

to my css.

I don't think there should be any limit. You may go to any number of characters. It will simply wrap them as per screen size and will show ".." in front of it.

Actually, it won't wrap because the CSS for jQuery Mobile explicitly sets white-space to nowrap. This plus the margin and overflow settings gives you a usable space of about 30-40 characters before truncation.

Also, you can try to use non-breaking-spaces with this:

 

The best solution should be add white-space: normal to your text container

<div data-role="header">
  <h2 style="white-space: normal">Long text Long text Long text Long text Long text  </h2>
</div>