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项就被隐藏了。只有onclick它们才会完整显示和显示。

Answer 1

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

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

＆＃13;

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

＆＃13;

ul {
  padding: 0; /* Offset the default 40px <ul> padding */
}

li {
  display: inline-block; /* Display the elements inline */
}

＆＃13;

<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>

＆＃13;

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

编辑：

要明确地在开头显示一个，在结尾两个显示，最好只是从截断中排除第一个n和最后n个元素。这可以在以下内容中看到：

＆＃13;

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

＆＃13;

ul {
  padding: 0; /* Offset the default 40px <ul> padding */
}

li {
  display: inline-block; /* Display the elements inline */
}

＆＃13;

<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>

＆＃13;

如何截断列表项

1 个答案:

编辑：