Javascript 限制字符串并计数剩余的项目

我有一个字符串，它是项目列表，例如：

-------------------------------- <- Div limit
this is a test | test | another string | abc | string test
-------------------------------- <- Div limit

-------------------------------------
var maxlength=20；
var结果=[]；
var text=“a | b | c dd d | ashbdhsjxbjybxxbxjbx”；
//明白了吗
var words=text.split（“|”）；
//环槽
对于（i=0；i而言，与其使用固定的最大字符数，不如使用所有可用的宽度。这里的解决方案不仅可以使用所有可用的空间，而且可以使用任何字体大小或样式。您甚至可以将链接和图像放在列表项中

此技术呈现列表，然后删除经过DIV右端的条目

假设这个HTML：

<div id="theList" class="List" style="width:40ex">
  <span class="Entry">this is a test</span>
  <span class="Divider">|</span>
  <span class="Entry">test</span>
  <span class="Divider">|</span>
  <span class="Entry">another string</span>
  <span class="Divider">|</span>
  <span class="Entry">abc</span>
  <span class="Divider">|</span>
  <span class="Entry">string test</span>
  <span class="Divider">|</span>  <!-- Extra divider, for the count. -->
  <span class="Count">0</span>    <!-- The count. -->
</div>

假设以下JavaScript代码：

// This uses jQuery.
var listDiv = $("#theList");
var listWidth = listDiv.innerWidth();
var entries = listDiv.children(".Entry");
var firstLeft = entries.eq(0).offset().left;
var countSpan = listDiv.children(".Count");
var nHidden = 0;
var i;
var entry;
var needWidth;
for (i = entries.length; 0 <= --i; /**/ ) {
  entry = entries.eq(i);
  if (nHidden != 0) {
    countSpan.text("+" + nHidden);
    needWidth = countSpan.offset().left + countSpan.outerWidth()
  } else {
    needWidth = entry.offset().left + entry.outerWidth();
  }
  if (listWidth < needWidth) {
    entry.css("display", "none");
    entry.next().css("display", "none");
    ++nHidden;
  } else {
    break;
  }
}
if (nHidden == 0) {
  countSpan.css("display", "none");
  countSpan.prev().css("display", "none");
}

//这使用jQuery。
var listDiv=$（“#列表”）；
var listWidth=listDiv.innerWidth（）；
var entries=listDiv.children（“.Entry”）；
var firstLeft=entries.eq（0）.offset（）.left；
var countSpan=listDiv.children（“.Count”）；
var-nHidden=0；
var i；
风险价值分录；
可变宽度；
对于（i=entries.length；0请查看以下小片段：

function some_function(qtt, text){
    var final_text = [];
    var parts = text.split("|");
    for(i=0; i<qtt; i++){
        final_text.push(parts[i]);
    }

    final_text.push(" +" + (parts.length - qtt));

    return final_text.join("|");
}

您可以使用下面的函数，我将其定义为jQuery插件，因此您可以编写如下内容：

-------------------------------- <- Div limit
this is a test | test | +3
-------------------------------- <- Div limit

$('div').clipText('this is a test | test | another string | abc | string test', ' | ');

下面是一个使用不同大小的
div
元素的工作演示，展示了如何在不同位置剪裁字符串


$.fn.clipText=函数（文本，delim）{
返回此。每个（函数（）{
变量部分=文本分割（delim），
$this=$（this）.text（'X'），
高度=$this.prop（'scrollHeight'）；
$this.text（text）；
对于（var i=1；$this.prop（'scrollHeight'）>height&&parts.length；i++）{
parts.pop（）；
$this.text（parts.concat（i++'）.join（delim））；
}
});
}
$（函数（）{
$（'div'）.clipText（'这是一个测试|测试|另一个字符串| abc |字符串测试'，
' | ');
})；
div{border:1px solid；}

如果您真的想这样做，请尝试使用数组并检查字符数是否超出限制，如果是这样，只需计算剩余字符数，不要添加它们…始终为“+2”保留3个或更多字符空间，并将“|”也计算为3个字符。您可以使用jquery进行此操作吗？有关额外积分的进一步想法：（1）（2）当用户点击“+ 3”时，显示3个隐藏单词的下拉列表，也可以作为链接。（3）如果列表表示路径中的文件夹，则将文件夹隐藏在路径的中间，而不是在结尾。对于某些系统，这是更有用的。（4）当用户将鼠标悬停在外部DIV上时，显示一个工具提示，显示与DIV内水平位置相对应的路径部分。这会随着用户向左和向右移动而发生变化，并使在有限空间内检查路径变得容易。
function some_function(qtt, text){
    var final_text = [];
    var parts = text.split("|");
    for(i=0; i<qtt; i++){
        final_text.push(parts[i]);
    }

    final_text.push(" +" + (parts.length - qtt));

    return final_text.join("|");
}

var a = "this is a test | test | another string | abc | string test";

some_function(2, a);
//this is a test | +4

some_function(1, a);
//this is a test | test | +3

$('div').clipText('this is a test | test | another string | abc | string test', ' | ');