{"id":20544,"date":"2022-11-10T01:08:33","date_gmt":"2022-11-09T19:38:33","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-how-to-truncate-a-list-item-closed\/"},"modified":"2022-11-10T01:08:33","modified_gmt":"2022-11-09T19:38:33","slug":"solved-how-to-truncate-a-list-item-closed","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-how-to-truncate-a-list-item-closed\/","title":{"rendered":"[Solved] How to truncate a list item [closed]"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

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<\/strong><\/a>.<\/p>\n

This can be seen in the following example which uses jQuery:<\/p>\n<\/p>\n

\n
\n
$(document).ready(function() {\r\n  var maxToShow = 3; \/\/ Number of links to show\r\n\r\n  $(\"ul li\").each(function(i, e) {\r\n    if (maxToShow % i - 1) { \/\/ Truncate to ellipsis\r\n      $(e).html('...');\r\n    }\r\n    if (i >= maxToShow) {\r\n      $(e).hide(); \/\/ Hide additional items\r\n    }\r\n  });\r\n});<\/code><\/pre>\n
ul {\r\n  padding: 0; \/* Offset the default 40px <ul> padding *\/\r\n}\r\n\r\nli {\r\n  display: inline-block; \/* Display the elements inline *\/\r\n}<\/code><\/pre>\n
<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.1.1\/jquery.min.js\"><\/script>\r\n\r\n<ul>\r\n  <li>Some text1<\/li>\r\n  <li>Some text2<\/li>\r\n  <li>Some text3<\/li>\r\n  <li>Some text4<\/li>\r\n  <li>Some text5<\/li>\r\n  <li>Some text6<\/li>\r\n<\/ul><\/code><\/pre>\n<\/div>\n<\/div>\n
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><\/code><\/a><\/strong> or similar.<\/p>\n
\n
EDIT:<\/h3>\n
To specifically show one at the start and two at the end, you’d be better off simply excluding the first n<\/code> and last n<\/code> elements from the truncation. This can be seen in the following:<\/p>\n<\/p>\n
\n
\n
$(document).ready(function() {\r\n  \/\/ Number to show\r\n  var showAtStart = 1;\r\n  var showAtEnd = 2;\r\n\r\n  \/\/ Truncate to ellipsis\r\n  for (var i = 0; i < $(\"ul li\").length; i++) {\r\n    if (i > showAtStart - 1 && i < $(\"ul li\").length - showAtEnd) {\r\n      $($(\"ul li\")[i]).html('...');\r\n    }\r\n  }\r\n\r\n});<\/code><\/pre>\n
ul {\r\n  padding: 0; \/* Offset the default 40px <ul> padding *\/\r\n}\r\n\r\nli {\r\n  display: inline-block; \/* Display the elements inline *\/\r\n}<\/code><\/pre>\n
<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.1.1\/jquery.min.js\"><\/script>\r\n\r\n<ul>\r\n  <li>Some text1<\/li>\r\n  <li>Some text2<\/li>\r\n  <li>Some text3<\/li>\r\n  <li>Some text4<\/li>\r\n  <li>Some text5<\/li>\r\n  <li>Some text6<\/li>\r\n<\/ul><\/code><\/pre>\n<\/div>\n<\/div><\/div>\n
<\/div>\n<\/div>\n
            5<\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved How to truncate a list item [closed] <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] 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; … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[464,346,388],"class_list":["post-20544","post","type-post","status-publish","format-standard","hentry","category-solved","tag-css","tag-html","tag-jquery"],"yoast_head":"\n[Solved] How to truncate a list item [closed] - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-how-to-truncate-a-list-item-closed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] How to truncate a list item [closed] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] 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; ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-how-to-truncate-a-list-item-closed\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-09T19:38:33+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-truncate-a-list-item-closed\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-truncate-a-list-item-closed\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] How to truncate a list item [closed]\",\"datePublished\":\"2022-11-09T19:38:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-truncate-a-list-item-closed\/\"},\"wordCount\":128,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"css\",\"html\",\"jquery\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-truncate-a-list-item-closed\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-how-to-truncate-a-list-item-closed\/\",\"name\":\"[Solved] How to truncate a list item [closed] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-11-09T19:38:33+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-truncate-a-list-item-closed\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-how-to-truncate-a-list-item-closed\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-truncate-a-list-item-closed\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] How to truncate a list item [closed]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] How to truncate a list item [closed] - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-how-to-truncate-a-list-item-closed\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] How to truncate a list item [closed] - JassWeb","og_description":"[ad_1] 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; ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-how-to-truncate-a-list-item-closed\/","og_site_name":"JassWeb","article_published_time":"2022-11-09T19:38:33+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-truncate-a-list-item-closed\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-truncate-a-list-item-closed\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] How to truncate a list item [closed]","datePublished":"2022-11-09T19:38:33+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-truncate-a-list-item-closed\/"},"wordCount":128,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["css","html","jquery"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-truncate-a-list-item-closed\/","url":"https:\/\/jassweb.com\/solved\/solved-how-to-truncate-a-list-item-closed\/","name":"[Solved] How to truncate a list item [closed] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-11-09T19:38:33+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-truncate-a-list-item-closed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-how-to-truncate-a-list-item-closed\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-truncate-a-list-item-closed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] How to truncate a list item [closed]"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/20544","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=20544"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/20544\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=20544"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=20544"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=20544"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}