[Solved] How to truncate a list item [closed]

by


It’s certainly possible to achieve this with a combination of CSS and JavaScript. What you want to do is limit the number of items displayed, and then check which elements should be truncated to ellipsis with modulo.

This can be seen in the following example which uses 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>

However, note that displaying list items inline kind of defeats the purpose of using list items, and you’d probably be better off using <span> or similar.

EDIT:

To specifically show one at the start and two at the end, you’d be better off simply excluding the first n and last n elements from the truncation. This can be seen in the following:

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

5

solved How to truncate a list item [closed]