javascript - 显示 chop 字符串的显示值

Question

我想做什么

我希望能够计算出字符串在被 chop 之前显示了多少。

我为什么要这样做

我有一个元素列表。您可以从此列表中选择任意数量的元素。我有一个面板元素，显示所选元素名称的逗号分隔字符串。如果字符串太长，它应该被 chop 并显示被 chop 隐藏的任何其他选定元素的 +{number} 值。

基本示例

https://stackblitz.com/edit/angular-ivy-cbyemy

上面的 stackblitz 显示了用例的基本示例。

当前面板标题:

an item, another item, som... +6

期望的结果:

an item, another item, som... +3

我尝试过的

• 使用element.innerHTML 和element.innerText 读取显示的字符串。两者都显示完整的字符串，而不是显示的 chop 字符串。

Answer 1

借用了here的回答并根据要求对其进行了一些修改。

您的 fork stackblitz，更新了工作演示 here .

你可以从这个函数中得到可见字符的数量-

countVisibleCharacters(element): number {
var text = element.firstChild.nodeValue;
var count = 0;

element.removeChild(element.firstChild);

for (var i = 0; i < text.length; i++) {
  var newNode = document.createElement('span');
  newNode.appendChild(document.createTextNode(text.charAt(i)));
  element.appendChild(newNode);

  if (newNode.offsetLeft < element.offsetWidth) {
    count++;
  }
}

return count;
}

那么就可以这样得到后缀了——

getTitleSuffix(): void {
let element = document.getElementById('title');
let count = this.countVisibleCharacters(element);
let substr = element.textContent;
substr = substr.substring(count - 1);
this.titleSuffix = substr.split(',').length;