Text-Overflow:Ellipsis on a Link

text-overflow:ellipsis on a link

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

Link with text-overflow ellipsis in a list-item on next line in Chrome and Safari

You can fix this by using display:inline-block on the <a> element:

a {  display:inline-block;   width: 100%;   white-space: nowrap;   overflow: hidden;   text-overflow: ellipsis;  vertical-align: top;}

<ul>  <li><a href="#">test</a></li></ul>

Use text-overflow: ellipsis on an anchor tag

You'll need to change it to display: block; or something else like inline-block and specify a width, e.g:

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

Smart overflow in HTML: is there any way to put ellipsis ... with a link at the end to view entire content?

Here is a basic example that iterates over elements with a class of .smart-overflow. It adds a clickable a element with a class of ellipsis-link only if the content is clipped. The link has a click event listener that will reveal the hidden content that was hidden with overflow: hidden. This example only works for a single line. See the alternative example below for an approach that works for multiple lines in supported browsers.

var elements = document.querySelectorAll('.smart-overflow');Array.prototype.forEach.call(elements, function (el) {  var link = document.createElement('a');  link.href = '#'; link.className = 'ellipsis-link';    if (el.offsetWidth < el.scrollWidth) {    link.addEventListener('click', function (e) {      e.preventDefault();      el.classList.remove('smart-overflow');    });    el.appendChild(link);  }});

p {  width: 200px;  position: relative;}.smart-overflow {  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;}a.ellipsis-link {  display: none;}.smart-overflow a.ellipsis-link {  display: block;  position: absolute;  right: 0; bottom: 0;  width: 1.2em;  height: 100%;  cursor: pointer;}

<p class="smart-overflow">No ellipsis.</p><p class="smart-overflow">This is a longer string of text which should have ellipsis. This is a longer string of text which should have ellipsis.</p><p class="smart-overflow">Another string of text which should have ellipsis. Another string of text which should have ellipsis.</p>

ellipsis not working for long URL

You need to set white-space: nowrap; in order for the ellipsis behaviour to work as you expect.

Demo Fiddle

HTML

<div class='ellipsis'>http://stackoverflow.com/questions/22609623/ellipsis-not-working-for-long-url</div>

CSS

.ellipsis {
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    -moz-binding:url('ellipsis-xbl.xml#ellipsis');
    white-space: nowrap;
    height: 22px;
    padding: 4px 2px 4px 2px;
    border-bottom-width: 1px;
    border-bottom-color: inherit;
    border-bottom-style: solid;
    width:100px; /* set as an example */
}

How to make in overflow the ellipsis to a clickable link?

check this out.

$(function () { $('.more-content').on('click', function () {  $('.maindiv').css('height','300px');    $('.maindiv').css({          "white-space": "normal",          "overflow" : "visible"    });    $(this).hide(); });});

.maindiv {  width: 250px;  height: 106px;  overflow: hidden;  text-overflow: ellipsis;  float: left;  word-wrap: break-word;}
.more-content {    position: relative;    top: 88px;    right: 19px;    text-decoration: none;    font-weight: bold;    font-size: 18px;    color: black;}a{ text-decoration : none} .box {      background-color: #ddd;      width: 250px;   }    .box p {    display: -webkit-box;    -webkit-line-clamp: 5;    -webkit-box-orient: vertical;    overflow: hidden;   }

<h1>Solution 1 </h1><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="maindiv"> <p>Lorem ipsum dolor sit amet, consecteturadipiscing elit. Aenean vehicula odio ac nisldignissim hendrerit. Proin libero arcu, commodoin aliquam porta, dignissim sodales tortor. Seddignissim mi cursus quam sollicitudin, vitaesemper nunc finibus. In id turpis velit. Nullamfinibus lobortis lacus vel egestas. In pretiumdictum ligula quis pulvinar. Aenean id dolor metus.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Donec commodo elementum erat blandit blandit.Cras quis elementum mi.</p></div>
 <a class="more-content" href="#">     ... </a> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/>  <br/> <br/>   <br/> <br/>   <br/>
 <h1>Solution 2 </h1>
 <div class="box"> <p>Lorem ipsum dolor sit amet, consecteturadipiscing elit. Aenean vehicula odio ac nisldignissim hendrerit. Proin libero arcu, commodoin aliquam porta, dignissim sodales<span><a href="https://www.google.com/">...</a></span>.</p></div>

Applying an ellipsis to multiline text

I finally found a solution to do what I want.
As p a paragraphe and article the wrapper.
If you want to apply ellipsis to p depending on article height (which also depends on window height), you need to get the height of the article, the line-height of the p and then articleHeight/lineHeight to find the number of line-clamp that can be added dynamically then.

The only thing is the line-height should be declared in the css file.

Check the following code. If you change the height of the window, the line-clamp will change. Can be great to create a plug-in aiming to do that.

jsfiddle

function lineclamp() {  var lineheight = parseFloat($('p').css('line-height'));  var articleheight = $('article').height();   var calc = parseInt(articleheight/lineheight);  $("p").css({"-webkit-line-clamp": "" + calc + ""});}

$(document).ready(function() {    lineclamp();});
$( window ).resize(function() {  lineclamp();});

article {  height:60%;  background:red;  position:absolute;}
p {  margin:0;  line-height:120%;  display: -webkit-box;  -webkit-box-orient: vertical;  overflow: hidden;  text-overflow: ellipsis;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><article> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lorem ligula, lacinia a justo sed, porttitor vulputate risus. In non feugiat risus. Sed vitae urna nisl. Duis suscipit volutpat sollicitudin. Donec ac massa elementum massa condimentum mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla sollicitudin sapien at enim sodales dapibus. Pellentesque sed nisl eu sem aliquam tempus nec ut leo. Quisque rutrum nulla nec aliquam placerat. Fusce a massa ut sem egestas imperdiet. Sed sollicitudin id dolor egestas malesuada. Quisque placerat lobortis ante, id ultrices ipsum hendrerit nec. Quisque quis ultrices erat.Nulla gravida ipsum nec sapien pellentesque pharetra. Suspendisse egestas aliquam nunc vel egestas. Nullam scelerisque purus interdum lectus consectetur mattis. Aliquam nunc erat, accumsan ut posuere eu, vehicula consequat ipsum. Fusce vel ex quis sem tristique imperdiet vel in mi. Cras leo orci, fermentum vitae volutpat vitae, convallis semper libero. Phasellus a volutpat diam. Ut pulvinar purus felis, eu vehicula enim aliquet vitae. Suspendisse quis lorem facilisis ante interdum euismod et vitae risus. Vestibulum varius nulla et enim malesuada fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lorem ligula, lacinia a justo sed, porttitor vulputate risus. In non feugiat risus. Sed vitae urna nisl. Duis suscipit volutpat sollicitudin. Donec ac massa elementum massa condimentum mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla sollicitudin sapien at enim sodales dapibus. Pellentesque sed nisl eu sem aliquam tempus nec ut leo. Quisque rutrum nulla nec aliquam placerat. Fusce a massa ut sem egestas imperdiet. Sed sollicitudin id dolor egestas malesuada. Quisque placerat lobortis ante, id ultrices ipsum hendrerit nec.</p></article>

---

Related Topics