Javascript 如何删除Jquery中元素溢出的文本

所以我正在开发一个web应用程序，这是我的布局。div使用

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

这在视觉上很好，在JSFIDLE中也很好。但是在web应用程序中，由于能够生成很长的名称，因此存在一些问题。这个问题源于这样一个事实：从技术上讲，它并没有删除溢出的文本。它（正如你用“隐藏”这个词所想）隐藏了它。如何检测“.Name”元素中溢出的文本并将其删除？我想保持相同的外观和规则。只删除隐藏的文本

---

LINK-

问题在于，并非所有字母彼此占用相同的空间。例如，I和M，其中M（猜测）约为I的3倍大

然而，你可以猜测和接近，但仍然没有保证

$('.Name').each(function() {

  let text = $(this).text();
  let width = $(this).parent('.Box').outerWidth();
  let fontSize = 18 - ( 18 * 0.35 ); // Hardcoded from CSS
  let count = width/fontSize;
  text = text.substr(0, count);  
  $(this).text(text);

});

这是上面的一个工作示例，使用CSS中的

字体大小

，删除约35%以允许更多字符，但根据实际使用的字母，结果可能会有很大差异

可以使用a，因为所有字符都应该占用相同的空间。然而，结果仍然不是十全十美的

---

您最好的选择是在创建名称时限制字符数，而不必在创建名称后返回并尝试对其进行分析。

对于来到本文的任何人，

最大宽度：40ch最适合我
 有了CSS，您无法操纵DOM和内容，您只能玩visualI，因为您知道这一点。应该暗示我在寻找Jquery的答案。我的错。所以除了直接限制角色数量之外，真的没有什么万无一失的方法吗？因为问题是（假设我做了30个），如果你有30个W，它看起来会很好。但一旦你有30个i，用户可能会想，为什么他们不能使用更多的分区空间。谢谢。我自己做了一些挖掘，找不到任何可靠的防火方式。我还用你提供的小提琴做了一些测试。有点难以置信。真的很感谢你的帮助。没问题，但是做更多的研究，找到适合你个人情况的东西总是好的。