текст исчезать на основе содержимого элемента

Question

Это мой JS:

if($('.js-documentBox').length){ 
    $('.js-documentBox').each(function(){ 
     if($(this).text().length > 20){ 
      $(this).addClass('test-class'); 
     } 
    }); 
} 

Это мой HTML:

<span class="js-documentBox">6227_150510_0510175608II</span> 

Итак, первый я проверить, существует ли элемент с '.js-documentBox' а затем для каждого найденного элемента я проверяю, содержит ли его содержимое более 20 символов, если это правда, я добавляю «test-class». Проблема заключается в том, чем в тест-классе я хочу CSS, который сделает такой же эффект, как этот код:

overflow: hidden; 
text-overflow: ellipsis; 

Любые предложения, как получить тот же эффект?

Answer 1

Просто добавьте display:inline-block; в тест-класс:

.test-class { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    display:inline-block; 
    width:150px; 
} 

EDIT:

Просто попробовал - вы также должны использовать width иначе вы не увидите эффект

Heres мой fiddle LINK

Answer 2

text-overflow относится только к элементам уровня блока (по умолчанию они являются встроенными), поэтому вам нужно либо сделать пролеты в divs (или другой элемент уровня блока), либо изменить его стиль, чтобы включить что-то вроде display:block.