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.