Text-overflow: эллипс по ссылке

Я хочу использовать свойство переполнения текста по ссылке. Я работаю над абзацем, но не для ссылки.

Вот код HTML

<div>
  <ul>
    <li>
        <p>the text is too long</p>
    </li>   
    <li>
         <a href="javascript:alert('test')">the link is too long</a>
    </li>
  </ul>
</div>

Вот код css:

a {
  white-space: nowrap;
  width:50px; 
  overflow: hidden;
  text-overflow: ellipsis;

}
p {
  white-space: nowrap;
  width:50px; 
  overflow: hidden;
  text-overflow: ellipsis;
}

См. пример http://jsfiddle.net/corinnekm/LLVDB/

Большое спасибо за вашу помощь.

Ответ 1

a <a> тег является встроенным элементом, вы можете применять только многоточие к элементу блока, попробуйте a { display: block; } и он работает

Ответ 2

http://primercss.io/utilities/ содержит набор правил CSS с усечением. См. https://jsfiddle.net/illegs/g04L9xd6/

.css-truncate.css-truncate-target,
.css-truncate .css-truncate-target {
display: inline-block;
max-width: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: top
}

.css-truncate.expandable.css-truncate-target,
.css-truncate.expandable.css-truncate-target,
.css-truncate.expandable:hover .css-truncate-target,
.css-truncate.expandable:hover.css-truncate-target {
max-width: 10000px !important
}

<span class="css-truncate expandable">
<span class="branch-ref css-truncate-target"><a href="javascript:alert('test')">the link is too long</a></span>