如何截断列表项[关闭]

Question

如何截断内联显示的列表项。 这是列表的一个示例。

<ul>
    <li>Some text1</li>
    <li>Some text2</li>
    <li>Some text3</li>
    <li>Some text4</li>
    <li>Some text5</li>
  <li>Some text6</li>
</ul>

要完全内联显示，列表中的项目数必须最大为 4。如果列表中的项目超过 4，则应用截断。 因此如果列表中只有 4 项，则显示为

Some text1 Some text2 Some text3 Some text4

但是如果有超过 4 个，比如上面的例子，列表中有 6 个项目。就是这样显示的

Some text1 ...  Some text5 Some text6

这样，项目 2、3,4 就被隐藏了。只有单击它们才会显示并完全显示。

Answer 1

当然可以通过结合使用 CSS 和 JavaScript 来实现这一点。您要做的是限制显示的项目数，然后使用modulo 检查哪些元素应该被截断为省略号。

这可以在以下使用 jQuery 的示例中看到：

$(document).ready(function() {
  var maxToShow = 3; // Number of links to show

  $("ul li").each(function(i, e) {
    if (maxToShow % i - 1) { // Truncate to ellipsis
      $(e).html('...');
    }
    if (i >= maxToShow) {
      $(e).hide(); // Hide additional items
    }
  });
});

ul {
  padding: 0; /* Offset the default 40px <ul> padding */
}

li {
  display: inline-block; /* Display the elements inline */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li>Some text1</li>
  <li>Some text2</li>
  <li>Some text3</li>
  <li>Some text4</li>
  <li>Some text5</li>
  <li>Some text6</li>
</ul>

但是，请注意，内联显示列表项会破坏使用列表项的目的，您最好使用 <span> 或类似的。

---

编辑：

要特别在开头显示一个，在结尾显示两个，最好从截断中简单地排除第一个 n 和最后一个 n 元素。这可以在下面看到：

$(document).ready(function() {
  // Number to show
  var showAtStart = 1;
  var showAtEnd = 2;

  // Truncate to ellipsis
  for (var i = 0; i < $("ul li").length; i++) {
    if (i > showAtStart - 1 && i < $("ul li").length - showAtEnd) {
      $($("ul li")[i]).html('...');
    }
  }

});

ul {
  padding: 0; /* Offset the default 40px <ul> padding */
}

li {
  display: inline-block; /* Display the elements inline */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li>Some text1</li>
  <li>Some text2</li>
  <li>Some text3</li>
  <li>Some text4</li>
  <li>Some text5</li>
  <li>Some text6</li>
</ul>