Question

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

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

我想做的是这样的事情：

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

我怎样才能完成类似的事情？有可能吗？文本是动态的，如果它适合div，它只能是（一个文本和+5）或所有文本。

Answer 1

使用所有可用的宽度会更友好，而不是使用固定的最大字符数。这是一个解决方案，不仅使用所有可用空间，而且适用于任何字体大小或样式。您甚至可以在列表条目中放置链接和图像！

此技术呈现列表，然后删除经过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>

上面的“宽度：40ex”只是为了强制这个DIV很短。你应该用你需要的宽度替换它。

假设这种CSS样式：

.List {
  overflow: hidden;
  white-space: nowrap;
  border: 1px dashed gray;    /* Only for debugging. */
}

.Entry {
  padding-left: 0.5ex;
  padding-right: 0.5ex;
  background-color: LightGreen;    /* Only for debugging. */
}

.Count {
  padding-left: 0.5ex;
  padding-right: 0.5ex;
  background-color: Orange;    /* Only for debugging. */
}

假设此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");
}

注意：此代码可能无法处理空列表。该代码可能无法处理甚至第一个条目太长的情况。 我将这些问题作为练习留给读者。

Go see it on my JSFiddle! >>

Answer 2

var maxlength=20;
var result=[];
var text="a | b | c dd d | ashBdhsjxbxjybxbxhxbxbxjbx";
//get the words
var words=text.split(" | ");
//loop trough
for(i=0;i<words.length;i++){
 //if word fits into content
 if(words[i].length<maxlength){
    //set maxlength to left space
    maxlength -=words[i].length;
    //add word to result
    result.push(words[i]);
 }else{
    //add sth like " 3+"
    result.push((words.length-i-1)+"+");
    //stop fetching words
    break;
 }
 }
 //add the line again
 result=result.join(" | ");

Answer 3

检查这个小片段：

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

Answer 4

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

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

这是一个包含不同大小的div元素的工作演示，演示了如何在不同位置剪切字符串。

$.fn.clipText = function(text, delim) {
    return this.each(function () {
        var parts = text.split(delim),
            $this = $(this).text('X'),
            height = $this.prop('scrollHeight');
        $this.text(text);
        for (var i = 1; $this.prop('scrollHeight') > height && parts.length; i++) {
            parts.pop();
            $this.text(parts.concat(i + '+').join(delim));
        }
    });
}

$(function() {
    $('div').clipText('this is a test | test | another string | abc | string test', 
                      ' | ');
});

div { border: 1px solid; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:320px"></div>
<div style="width:310px"></div>
<div style="width:280px"></div>
<div style="width:250px"></div>
<div style="width:210px"></div>
<div style="width:120px"></div>
<div style="width:100px"></div>

限制字符串和计数项目

4 个答案: