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.
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 Improve this question edited Apr 24, 2012 at 16:54 MonkeyBonkey asked Apr 24, 2012 at 12:26 MonkeyBonkeyMonkeyBonkey 48k82 gold badges270 silver badges479 bronze badges5 Answers
Reset to default 4I 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/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./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>The only way I know to do this is to add the words one at a time, and measure the height of the element as you go. When the height changes, you've reached your limit...
Here is a bootstrapped piece of code that plays with CSS rules. It checks whether the width() is bigger than the parent div and displays and X others if it overflows.
<style>
#container {width: 170px;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;}
#words {display: inline}
</style>
<div id="container"><div id="words">Mary</div></div><div id="others"></div>
<input type="button" onclick="addName();" value="add" />
<script>
var namesAfterEllipsis = 0;
function addName() {
$("#words").append(", Tom");
if ($("#words").width() >= $("#container").width())
$("#others").html("and " + ++namesAfterEllipsis + " other" + (namesAfterEllipsis > 1 ? "s" : ""));
}
</script>
You can see it run there
That's easy squeezy lemon peasy...
var orginalStr = "Tim, Tom, Mary, Bob, Sam, John";
var elStr = "Tim, Tom, Mary, ...".substring(0, "Tim, Tom, Mary, ...".indexOf("..."));
//That should give you "Tim, Tom, Mary, ";
var count = originalStr.replace(elStr, "").split(",").length;
I recently did something like this and it works well in WebView on Android. From memory (using jQuery but can be adapted easily enough):
var names = $('.names');
names.data('original', names.text());
names.data('truncated', 0);
function truncate() {
var n = names[0], t = names.text();
if (n.scrollWidth > n.clientWidth) {
names.data('truncated', names.data('truncated') + 1);
names.text(t.substring(0, t.lastIndexOf(' ')));
// remove one word, and let the DOM update
setTimeout(truncate);
} else {
// set the text back to the original value
// names.data('truncated') should now have the number of truncated words
names.text(names.data('original'));
}
}
truncate();