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?

Quiche

i have one question related to the ellipsis in the mobile. How would user know the whole title "My long Project title that will break" in mobile layout where ellipsis is introduced? – Carlenacarlene

That's a good point. Back in 2013 I wasn't thinking of that part of the UX. I suppose nowadays I would use an alternative approach, or perhaps if you were adventurous you could animate the title from left to right. – Quiche

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.

Dachia

Unfortunately that doesn't work for me because the title bar has to balance two buttons, and a maximum width needs to be defined - see my edit to the question above where my problem continues. I did try your answer, however, but since there's no maximum width defined the title doesn't know when to cut off so it extends past the page. – Quiche

Answer 2

For some reason using text-overflow: ellipsis doesn't work unless you specify fixed width to the element or its parent.
Apply the below style to your text element and wrap that element in a container whose width is 100%.

{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: initial;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

Feminize

this must be the valid answer – Fishery