You can use text-overflow
to truncate a text using CSS but it does not fit fancy requirements.
Here is a hack for the special case where you want to truncate one of two strings in one line that can both vary in length, while fully keeping one of them. See this example screenshot where we never want to show an ellipsis for the distance:
You can try pretty hard, but there is no cool way with just using floats etc. Margins set in the CSS only work when one of the elements always has a fixed width. This is the result of a journey through that and more, ending up with a jQuery solution.
For it to work, just use the following structure and classes:
<li class="overflow_container">
<a href="#" class="overflow_truncate">A very long city name</a>
<span class="overflow_keep">
(23 miles)
</span>
</li>
This is the Sass that goes along with it, providing a fallback case for visitors without JavaScript that does regular text-overflow
magic:
.overflow_container
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
Here is the code that makes the result pretty, using jQuery:
$(this).find('.overflow_container').each(function() {
var truncate = $(this).find('.overflow_truncate');
var keep = $(this).find('.overflow_keep');
if (truncate && keep) {
truncate.css('text-overflow', 'ellipsis');
truncate.css('overflow', 'hidden');
$.each([ truncate, keep ], function(index, self) {
$(self).css('float', 'left');
$(self).css('white-space', 'nowrap');
});
keep.html(' ' + $.trim(keep.html()));
var keepWidth = keep.outerWidth();
var containerWidth = $(this).outerWidth();
truncate.css('max-width', (containerWidth - keepWidth) + 'px');
}
});
Mind the following: