I have the following html code
<html>
<head>
<style>
span {
display:inline-block;
}
</style>
</head>
<body>
<div style='width:60px; white-space:nowrap; overflow:hidden;
text-overflow:ellipsis'>
<span>abc</span>
<span>def</span>
<span>ghi</span>
<span>jkl</span>
</div>
</body>
</html>
The result looks like:
abc def g (the g is partially cropped)
Question) How can I make it looks like:
abc def g...
Thanks in advance!