Trying to turn long title in to ellipsis on responsive design

Question

I'm designing a responsive web app, and I'd like to encapsulate long text in the title with an ellipsis. How can I do this? It's a responsive page (no fixed-width)...

Here is an example

Can anyone help?

Edit:

I added a max-width and an ellipsis overflow like this:

max-width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

But this won't work for me because the key here is responsiveness. I don't to target the max-width of the title specifically for iOS mobile browsers, I want the max-width to enlarge or reduce on all smart phones. Any suggestions?

Answer 1

Who knew that you could handle this in straight CSS? I was surprised, but check out the text-overflow property. One of the possible values is ellipsis! https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

See the fiddle: http://jsfiddle.net/PdRqB/

You need to add three properties to the title:

.title {
    width: 100px; /* Need to specify a width (can be any unit). overflow: hidden does nothing unless the width of .title is less than the width of the containing content */
    overflow: hidden; /* to hide anything that doesn't fit in the containing element. */
    white-space: nowrap; /* to make sure the line doesn't break when it is longer than the containing div. */
    text-overflow: ellipsis; /* to do what you want. */
}

One cool part is, no media queries necessary. It is responsive already (try resizing the pane in the fiddle).

Update:

Just saw your update... Your containing element's width can be set to a percentage, even 100%. Then, overflow: hidden and white-space: nowrap can do their magic on the child title element.