How to Show Dots ("...") in a Span with Hidden Overflow

How can I show dots ( ... ) in a span with hidden overflow?

For this you can use text-overflow: ellipsis; property. Write like this

span {    display: inline-block;    width: 180px;    white-space: nowrap;    overflow: hidden !important;    text-overflow: ellipsis;}

<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span>

How to display 3 dots when text overflow div in height

You could achieve height vice text ellipsis through the '-webkit-line-clamp' css property. Use the number based on what line number you want the dots to appear.

.cut-text { 
  width: 160px; 
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

<div class="cut-text">
I like big butts and I can not lie I like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lieI like big butts and I can not lie
</div>

CSS text-overflow: ellipsis; not working?

text-overflow:ellipsis; only works when the following are true:

The element's width must be constrained in px (pixels). Width in % (percentage) won't work.
The element must have overflow:hidden and white-space:nowrap set.

The reason you're having problems here is because the width of your a element isn't constrained. You do have a width setting, but because the element is set to display:inline (i.e. the default) it is ignoring it, and nothing else is constraining its width either.

You can fix this by doing one of the following:

Set the element to display:inline-block or display:block (probably the former, but depends on your layout needs).
Set one of its container elements to display:block and give that element a fixed width or max-width.
Set the element to float:left or float:right (probably the former, but again, either should have the same effect as far as the ellipsis is concerned).

I'd suggest display:inline-block, since this will have the minimum collateral impact on your layout; it works very much like the display:inline that it's using currently as far as the layout is concerned, but feel free to experiment with the other points as well; I've tried to give as much info as possible to help you understand how these things interact together; a large part of understanding CSS is about understanding how various styles work together.

Here's a snippet with your code, with a display:inline-block added, to show how close you were.

.app a {  height: 18px;  width: 140px;  padding: 0;  overflow: hidden;  position: relative;  display: inline-block;  margin: 0 5px 0 5px;  text-align: center;  text-decoration: none;  text-overflow: ellipsis;  white-space: nowrap;  color: #000;}

<div class="app">  <a href="">Test Test Test Test Test Test</a></div>

text-overflow: ellipsis not working

You need to have CSS overflow, width (or max-width), display, and white-space.

http://jsfiddle.net/HerrSerker/kaJ3L/1/

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden
}

body {
    overflow: hidden;
}

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden
}

<span>Test test test test test test</span>

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>

Create leading dots in CSS

Taken from this article on Leader Dots with CSS:

The field label is wrapped in a div which has a small image of a dot applied repeatedly in the x direction as a background. This alone would cause the dots to flow under the text. So to nullify that effect, the text itself is then wrapped in a span where the background color is set to match the color of the background of the containing element.

Here is the CSS:
.dots { 
  background: url('dot.gif') repeat-x bottom; 
}
.field {
  background-color: #FFFFFF;
} 
To apply this to the example form, you would just use it as:
<div class="dots">
    <span class="field">LastName</span>
</div>

Here's a image to use for the dot: https://i.stack.imgur.com/otJN0.png

Demo in Stack Snippets

.dots {   background: url('https://i.stack.imgur.com/otJN0.png') repeat-x bottom; }.field {  background-color: #FFFFFF;}.link {  width: 150px;  display: inline-block;}

<div class="row">  <div class="dots link">      <span class="field">Link</span>  </div>  <span class="chapter">      Chapter 1  </span></div>
<div class="row">  <div class="dots link">      <span class="field">Link</span>  </div>  <span class="chapter">      Chapter 2  </span></div>
<div class="row">  <div class="dots link">      <span class="field">Link</span>  </div>  <span class="chapter">      Chapter 3  </span></div>

css ellipsis on second line

A requirement for text-overflow: ellipsis; to work is a one-line version of white-space (pre, nowrap etc). Which means the text will never reach the second line.

Ergo. Not possible in pure CSS.

My source when I was looking for the exact same thing just now: http://www.quirksmode.org/css/textoverflow.html (Quirksmode ftw!)

EDIT If the good CSS gods will implement http://www.w3.org/TR/css-overflow-3/#max-lines we can haz this in pure CSS using fragments (new) and max-lines (new). Also some more info on http://css-tricks.com/line-clampin/

EDIT 2 WebKit/Blink has line-clamp: -webkit-line-clamp: 2 will put ellipsis on 2nd line.

If sentence inside span is too long, don't show sentence, show dots

You can try a visual hack like below:

.box {  border: 1px solid;  width: 200px;  font-size:25px;  height: 1.2em;  overflow: hidden;}.box::before {   content:"...";   display:inline-block;   width:0;   text-indent:5px;}.box > span {  display:inline-block;  padding:0 5px;  white-space:nowrap;  background:#fff;}

<div class="box"><span>Lorem </span></div><div class="box"><span>Lorem ipsum</span></div><div class="box"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur </span></div>

How can I detect a click on ellipsis (...) in browser?

This will be a little tricky...It looks like you are using .ellipsis class on ellipsis text...

...so try to append a span on every .ellipsis class element using each jQuery. Use position to align that span at end of text

...and then add a click event to that span

^{Note: I added a background color to that span just for visual}

Stack Snippet

$(".ellipsis").each(function() {  $(this).append("<span class='dots'></span>")})
$(document).on("click", ".dots", function() {  console.log("ellipsis element is clicked");})

p {  width: 150px;  border: 1px solid;  font: 13px Verdana;}
.ellipsis {  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;  position: relative;}
span.dots {  position: absolute;  right: 0;  top: 0;  bottom: 0;  width: 12px;  background: #ff000052;  z-index: 99;  cursor:pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><p class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><p class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>