javascript - 有没有办法知道在 text-overflow:ellipsis 和 overflow:hidden 应用后有多少字符被保留或可见？

Question

我有一串用分隔符“;”分隔的电子邮件地址 并希望按原样显示所有文本。还希望将任何溢出文本剪切到一行上，然后显示用户没有看到的剩余电子邮件 ID 的计数（由一些 @ 和 ; 字符逻辑驱动）。有没有办法知道在 HTML 文本被剪辑后保留/甚至删除了多少字符？

标签： javascripthtmljquerycss

Answer 1

我不知道你的标准到底是什么，但这里有一个如何计算的例子：

var span = document.getElementById("text");
var countSpan = document.getElementById("count");
var orig = span.innerText;
var vis = orig;

while(vis.length && span.scrollWidth > parseFloat(window.getComputedStyle(span).width))
{
  vis = vis.slice(0,-1);
  span.innerText = vis + "....";
}
span.innerText = orig;

var visibleText = vis;
var truncatedText = orig.replace(new RegExp("^" + vis.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')), "");
var visibleCleanLessText;
var visibleCleanMoreText;
var truncatedCleanLessText;
var truncatedCleanMoreText;
if (truncatedText === "" || truncatedText.substr(0, 1) == ";")
{
  visibleCleanLessText = vis;
  visibleCleanMoreText = vis;
  truncatedCleanLessText = truncatedText.substr(1);
  truncatedCleanMoreText = truncatedCleanLessText;
}
else
{
  var m = vis.match(/;([^;]*)$/);
  visibleCleanLessText = m ? vis.replace(/;[^;]*$/, "") : "";
  visibleCleanMoreText = vis + (truncatedText.match(/^([^;]*);/) || ["",""])[1];
  truncatedCleanMoreText = (m ? m[1] : vis) + truncatedText;
  truncatedCleanLessText = truncatedText.replace(/^[^;]*;/, "");
}
var truncatedCount = truncatedCleanMoreText === "" ? 0 : truncatedCleanMoreText.split(";").length;
if (truncatedCount)
{
  countSpan.innerText = "+" + truncatedCount;
  span.title = orig;
}

console.log("orig              ", orig);
console.log("visible           ", vis);
console.log("truncated         ", truncatedText);
console.log("visibleCleanLess  ", visibleCleanLessText);
console.log("truncatedCleanMore", truncatedCleanMoreText);
console.log("visibleCleanMore  ", visibleCleanMoreText);
console.log("truncatedCleanLess", truncatedCleanLessText);

div
{
  vertical-align: middle;
}
.truncate
{
  width: 300px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.count:empty
{
  display: none;
}
.count
{
  display: inline-block;
  position: relative;
  font-family: monospace;
  font-size: 90%;
  left: -0.5em;
  border: 1px solid black;
  border-radius: 0.3em;
  padding: 0.1em;
}

<div>
  <span id="text" class="truncate">[e-mail];[e-mail];[e-mail];[e-mail]</span>
  <span id="count" class="count"></span>
</div>