时间戳

首页 > 解决方案 > 显示截断字符串的显示值

javascript - 显示截断字符串的显示值

问题描述

我想做的事

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

为什么我想做

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

基本示例

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

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

当前面板标题：

一个项目，另一个项目，一些... +6

期望的结果：

一个项目，另一个项目，一些... +3

我试过的

标签： javascripthtmlcssangular

解决方案

从这里借了一个答案，并根据要求对其进行了一些修改。

您的分叉堆栈闪电战，在这里更新了工作演示。

您可以从此函数获取可见字符的计数 -

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;

}

推荐阅读