Title and Back Button Text

[DataZombies]

The title and back button text are not being truncated correctly

[thomasyip]

Is it fixed?

If not, please reopen.

[devgeeks]

Still happening.

[thomasyip]

Took a brief look, harder to fix that I first thought. We use overflow-x: visible to show the "arrow" of the back button.

For the title, I think it is the button that being too long.

Try the following css to see if it fix the "title" problem.

#jqt .back {
   max-width: 55px;
}

You might workaround it with an extra <div> and gives it a max-width as well.

[jordandobson]

The problem is you need overflow: hidden; set for the ellipsis on text-overflow to work. The only way I've been able to do that is by setting a wrapper around your link text.

[thomasyip]

Yes, @jordandobson, that's what I was trying to say with and extra <div>. You said it better.

[devgeeks]

setting the max-width of the back button, then wrapping the text of the back button in a <div> and giving that div overflow-x:hidden; text-overflow: ellipsis works a treat.

[davidkaneda]

Perhaps we should automatically do this on an inner element (instead of outer) within jQTouch itself?

Ala: .back > span { max-width: 55px; text-overflow: ellipsis; overflow: hidden }

[devgeeks]

+1

[thomasyip]

I am wishing for a solution that doesn't requires user (nor JavaScript) to add the wrapper <div> or <span>. :-)