【问题标题】：Show the displayed value of an truncated string显示截断字符串的显示值
【发布时间】：2021-11-04 04:14:40
【问题描述】：

我想做什么

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

我为什么要这样做

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

基本示例

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

上面的 stackblitz 展示了一个基本的用例示例。

当前面板标题：

一件物品，另一件物品，某... +6

想要的结果：

一件物品，另一件物品，某... +3

我尝试过的

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

【问题讨论】：

如果面板是固定宽度的，您可以计算省略号之后发生的字符数，但这可能会因字体大小不同而变得不确定。如果它不是固定宽度，我建议不要在 CSS 中处理省略号，而是在 panel.component.ts 的构造函数中处理并添加 2 个新变量 - shortTitle 和 itemsHidden 并使用它。
如果面板的css是overflow: hidden，你基本上想要做的是获取隐藏内容的计数

标签： javascript html css angular

【解决方案1】：

从here借了一个答案，并根据要求稍作修改。

您的分叉堆栈闪电战，更新了工作演示 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;

}

【讨论】：