CSS to make tab title containing fixed character length?

Question

i am using jquerytabs which add the tab dynamically on click of some button. Title can be of any character length . What i want is if title contains more than 20 character, CSS should make it to 17 length character with 3 dots in front of it. here is title html element which i see in firebug where Title is "Test Title length With Too many Characters"

<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
<a href="#ui-tabs-4">Test Title length With Too many Characters/a>
<span class="ui-icon ui-icon-close"></span>
</li>

i am looking for css property so that i see the title as "Test Title length..." which is 17 character long and three dots in front of it?

Answer 1

You probably want something like this : http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

i.e. add this class to the list item :

.truncate {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}