Home/ Questions/Q 7833565
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T12:46:24+00:00

I’m currently using the css property ellipsis to add an ellipsis to the end

  • 0

I’m currently using the css property ellipsis to add an ellipsis to the end of my line. However, I also want to display the number of words after the ellipsis. For instance

.names {
    border: 1px solid #000000;
    white-space: nowrap;
    width: X;
    overflow: hidden;
    text-overflow: ellipsis;
}

<div class="names">Tim, Tom, Mary, Bob, Sam, John</div>

Shows

Tim, Tom, Mary, …

But, in this case I would want to show that the ellipsis represents 3 other names.

Tim, Tom, Mary, … and 3 others

What’s the minimal way to do this, either in javascript or with css. I’m using a webview in an iOS app and this will have to get calculated on every row item in a table so I would need to have a very lightweight js function.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I probably need a lot more rigid requirements in order to give you a better / more robust code for this. But I assume something like this is what you were looking for.

    http://jsfiddle.net/Xf47e/3/

    I don’t know how you are currently dealing with your code issues but I’d be surprised if you haven’t faced the issue of H… aka a half cut word already as well as many other problems that arise with the fact that character widths are most likely not constant with whatever font you are using.

    var names;
$(document).ready(function() {
  names = $('p.test').text().split(',');
  for (i = 0; i < names.length; i++) {
    if (i < names.length - 1)
      $('p.test2').append(names[i] + ',');
    else
      $('p.test2').append(names[i]);
    console.log(i + " " + $('p.test2').width());
    if ($('p.test2').width() > 100) {
      break;
    }
  }
  $('p.test2').append(' ... and ' + (names.length - i + 1) + ' others.');
});
    p.test {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

p.test2 {
  float: left;
}
    <!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <div>
    <p class="test">Tom, Bob, Harry, Dick, John, James, Smith, Paul</p>
    <p class="test2"></p>
  </div>
</body>

</html>
    • 0