javascript - 限制字符串并计算剩余的项目

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>

上面的“width: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! >>