CODEWITHSUNDEEP
css
Corinne Kubler
Corinne Kubler

Reputation: 2092

text-overflow:ellipsis on a link

I want to use text-overflow property on a link. I work for a paragraph but not for a link.

Here is the HTML code

<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>

Here is the css code :

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

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

See example on http://jsfiddle.net/corinnekm/LLVDB/

Thanks a lot for your help.

Upvotes: 44

Views: 48359

Answers (2)

Gilles
Gilles

Reputation: 165

http://primercss.io/utilities/ has a css truncate set of rules. See 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>

Upvotes: 9

Andy
Andy

Reputation: 14575

an <a> tag is an inline element, you can only apply ellipsis to a block element, try a { display: block; } and it works

Upvotes: 86

Related Questions