Question

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

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

这在视觉上很好，并且在jsfiddle中也很好。但是，能够制作很长的名称在Web应用程序中存在问题。这个问题来自于技术上不删除溢出文本的事实。它（正如你所想的那样用“隐藏”这个词）隐藏它。您将如何检测“.Name”元素中的溢出文本并将其删除？我想保持相同的外观和规则。只删除隐藏的文本。感谢。

LINK - https://jsfiddle.net/t29ffzan/12/

Answer 1

问题在于并非所有字母都占用相同的空间。例如I和M，其中M（猜测）是我的大约3倍See this explanation。

然而，你可以猜测并接近但仍然无法保证。

$('.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);

});

此fiddle是上述工作示例，并使用CSS中的font-size并删除~35％以允许更多字符，但根据实际字母使用情况，结果可能会有很大差异。

您可以使用fixed width font，因为所有字符都占用相同的空间。但是，结果仍然不会是完美的。

您最好的选择是创建名称时的字符数限制，而不是必须返回并在事后尝试解析它。

Answer 2

对于发表这篇文章的人来说，max-width: 40ch;对我来说效果最好。

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

2 个答案: