truncatewords – Liquid template language

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>truncatewords – Liquid template language</title> <meta name="description" content="Liquid filter that truncates a string to a given number of words."> <meta name="author" content="Shopify"> <meta name="robots" content="index, follow"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="default"> <link rel="stylesheet" href="/liquid/css/main.css"> <link rel="icon" type="image/png" href="/liquid/images/icons/water-drop-32x.png" sizes="32x32"> <link rel="icon" type="image/png" href="/liquid/images/icons/water-drop-64x.png" sizes="64x64"> <link rel="canonical" href="https://shopify.github.io/liquid/filters/truncatewords/"> <link rel="alternate" type="application/rss+xml" title="Liquid template language" href="/liquid/feed.xml" /> <meta property="og:site_name" content="Liquid template language"> <meta property="og:type" content="website"> <meta property="og:url" content="/liquid/filters/truncatewords/"> <meta property="og:title" content="truncatewords"> <meta property="og:description" content="Liquid filter that truncates a string to a given number of words."> <meta name="twitter:site" content="Liquid template language"> <meta name="twitter:card" content="summary"> <meta name="twitter:url" content="https://shopify.github.io"> <meta name="twitter:title" content="truncatewords"> <meta name="twitter:description" content="Liquid filter that truncates a string to a given number of words.">  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-49178120-52"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-49178120-52'); </script> </head> <body> <div class="sidebar"> <header class="sidebar__logo" role="banner"> <a href="/liquid/">Liquid</a> </header><nav class="sidebar__nav"> <div class="sidebar__nav-interior"><h3 class="section__header" id="basics-section">Basics</h3> <ul class="section__links"><li class="section__item"> <a href="/liquid/basics/introduction/" class="section__link">Introduction</a> </li><li class="section__item"> <a href="/liquid/basics/operators/" class="section__link">Operators</a> </li><li class="section__item"> <a href="/liquid/basics/truthy-and-falsy/" class="section__link">Truthy and falsy</a> </li><li class="section__item"> <a href="/liquid/basics/types/" class="section__link">Types</a> </li><li class="section__item"> <a href="/liquid/basics/variations/" class="section__link">Variations of Liquid</a> </li><li class="section__item"> <a href="/liquid/basics/whitespace/" class="section__link">Whitespace control</a> </li></ul><h3 class="section__header" id="tags-section">Tags</h3> <ul class="section__links"><li class="section__item"> <a href="/liquid/tags/control-flow/" class="section__link">Control flow</a> </li><li class="section__item"> <a href="/liquid/tags/iteration/" class="section__link">Iteration</a> </li><li class="section__item"> <a href="/liquid/tags/template/" class="section__link">Template</a> </li><li class="section__item"> <a href="/liquid/tags/variable/" class="section__link">Variable</a> </li></ul><h3 class="section__header" id="filters-section">Filters</h3> <ul class="section__links"><li class="section__item"> <a href="/liquid/filters/abs/" class="section__link">abs</a> </li><li class="section__item"> <a href="/liquid/filters/append/" class="section__link">append</a> </li><li class="section__item"> <a href="/liquid/filters/at_least/" class="section__link">at_least</a> </li><li class="section__item"> <a href="/liquid/filters/at_most/" class="section__link">at_most</a> </li><li class="section__item"> <a href="/liquid/filters/capitalize/" class="section__link">capitalize</a> </li><li class="section__item"> <a href="/liquid/filters/ceil/" class="section__link">ceil</a> </li><li class="section__item"> <a href="/liquid/filters/compact/" class="section__link">compact</a> </li><li class="section__item"> <a href="/liquid/filters/concat/" class="section__link">concat</a> </li><li class="section__item"> <a href="/liquid/filters/date/" class="section__link">date</a> </li><li class="section__item"> <a href="/liquid/filters/default/" class="section__link">default</a> </li><li class="section__item"> <a href="/liquid/filters/divided_by/" class="section__link">divided_by</a> </li><li class="section__item"> <a href="/liquid/filters/downcase/" class="section__link">downcase</a> </li><li class="section__item"> <a href="/liquid/filters/escape/" class="section__link">escape</a> </li><li class="section__item"> <a href="/liquid/filters/escape_once/" class="section__link">escape_once</a> </li><li class="section__item"> <a href="/liquid/filters/first/" class="section__link">first</a> </li><li class="section__item"> <a href="/liquid/filters/floor/" class="section__link">floor</a> </li><li class="section__item"> <a href="/liquid/filters/join/" class="section__link">join</a> </li><li class="section__item"> <a href="/liquid/filters/last/" class="section__link">last</a> </li><li class="section__item"> <a href="/liquid/filters/lstrip/" class="section__link">lstrip</a> </li><li class="section__item"> <a href="/liquid/filters/map/" class="section__link">map</a> </li><li class="section__item"> <a href="/liquid/filters/minus/" class="section__link">minus</a> </li><li class="section__item"> <a href="/liquid/filters/modulo/" class="section__link">modulo</a> </li><li class="section__item"> <a href="/liquid/filters/newline_to_br/" class="section__link">newline_to_br</a> </li><li class="section__item"> <a href="/liquid/filters/plus/" class="section__link">plus</a> </li><li class="section__item"> <a href="/liquid/filters/prepend/" class="section__link">prepend</a> </li><li class="section__item"> <a href="/liquid/filters/remove/" class="section__link">remove</a> </li><li class="section__item"> <a href="/liquid/filters/remove_first/" class="section__link">remove_first</a> </li><li class="section__item"> <a href="/liquid/filters/remove_last/" class="section__link">remove_last</a> </li><li class="section__item"> <a href="/liquid/filters/replace/" class="section__link">replace</a> </li><li class="section__item"> <a href="/liquid/filters/replace_first/" class="section__link">replace_first</a> </li><li class="section__item"> <a href="/liquid/filters/replace_last/" class="section__link">replace_last</a> </li><li class="section__item"> <a href="/liquid/filters/reverse/" class="section__link">reverse</a> </li><li class="section__item"> <a href="/liquid/filters/round/" class="section__link">round</a> </li><li class="section__item"> <a href="/liquid/filters/rstrip/" class="section__link">rstrip</a> </li><li class="section__item"> <a href="/liquid/filters/size/" class="section__link">size</a> </li><li class="section__item"> <a href="/liquid/filters/slice/" class="section__link">slice</a> </li><li class="section__item"> <a href="/liquid/filters/sort/" class="section__link">sort</a> </li><li class="section__item"> <a href="/liquid/filters/sort_natural/" class="section__link">sort_natural</a> </li><li class="section__item"> <a href="/liquid/filters/split/" class="section__link">split</a> </li><li class="section__item"> <a href="/liquid/filters/strip/" class="section__link">strip</a> </li><li class="section__item"> <a href="/liquid/filters/strip_html/" class="section__link">strip_html</a> </li><li class="section__item"> <a href="/liquid/filters/strip_newlines/" class="section__link">strip_newlines</a> </li><li class="section__item"> <a href="/liquid/filters/sum/" class="section__link">sum</a> </li><li class="section__item"> <a href="/liquid/filters/times/" class="section__link">times</a> </li><li class="section__item"> <a href="/liquid/filters/truncate/" class="section__link">truncate</a> </li><li class="section__item"> <a href="/liquid/filters/truncatewords/" class="section__link section__link--is-active">truncatewords</a> </li><li class="section__item"> <a href="/liquid/filters/uniq/" class="section__link">uniq</a> </li><li class="section__item"> <a href="/liquid/filters/upcase/" class="section__link">upcase</a> </li><li class="section__item"> <a href="/liquid/filters/url_decode/" class="section__link">url_decode</a> </li><li class="section__item"> <a href="/liquid/filters/url_encode/" class="section__link">url_encode</a> </li><li class="section__item"> <a href="/liquid/filters/where/" class="section__link">where</a> </li></ul></div><script type="text/javascript"> document.getElementById("filters").scrollIntoView(); </script></nav> </div> <div class="content__overlay"></div> <main class="content__area" role="main"> <div class="content"> <button class="menu-button"> <span aria-hidden="true"><svg height="16" viewBox="0 0 12 16" width="12" xmlns="http://www.w3.org/2000/svg"><path d="m11.41 9h-10.82c-.59 0-.59-.41-.59-1s0-1 .59-1h10.81c.59 0 .59.41.59 1s0 1-.59 1zm0-4h-10.82c-.59 0-.59-.41-.59-1s0-1 .59-1h10.81c.59 0 .59.41.59 1s0 1-.59 1zm-10.82 6h10.81c.59 0 .59.41.59 1s0 1-.59 1h-10.81c-.59 0-.59-.41-.59-1s0-1 .59-1z"/></svg></span> <span>Menu</span> </button> <h1>truncatewords</h1> <p>Shortens a string down to the number of words passed as an argument. If the specified number of words is less than the number of words in the string, an ellipsis (…) is appended to the string.</p> <p class="code-label">Input</p> <div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{{</span><span class="w"> </span><span class="s2">"Ground control to Major Tom."</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nf">truncatewords</span><span class="p">:</span><span class="w"> </span><span class="mi">3</span><span class="w"> </span><span class="p">}}</span> </code></pre></div></div> <p class="code-label">Output</p> <div class="language-text highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Ground control to... </code></pre></div></div> <h3 id="custom-ellipsis">Custom ellipsis</h3> <p><code class="language-plaintext highlighter-rouge">truncatewords</code> takes an optional second argument that specifies the sequence of characters to be appended to the truncated string. By default this is an ellipsis (…), but you can specify a different sequence.</p> <p class="code-label">Input</p> <div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{{</span><span class="w"> </span><span class="s2">"Ground control to Major Tom."</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nf">truncatewords</span><span class="p">:</span><span class="w"> </span><span class="mi">3</span><span class="p">,</span><span class="w"> </span><span class="s2">"--"</span><span class="w"> </span><span class="p">}}</span> </code></pre></div></div> <p class="code-label">Output</p> <div class="language-text highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Ground control to-- </code></pre></div></div> <h3 id="no-ellipsis">No ellipsis</h3> <p>You can avoid showing trailing characters by passing a blank string as the second argument.</p> <p class="code-label">Input</p> <div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{{</span><span class="w"> </span><span class="s2">"Ground control to Major Tom."</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nf">truncatewords</span><span class="p">:</span><span class="w"> </span><span class="mi">3</span><span class="p">,</span><span class="w"> </span><span class="s2">""</span><span class="w"> </span><span class="p">}}</span> </code></pre></div></div> <p class="code-label">Output</p> <div class="language-text highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Ground control to </code></pre></div></div> </div> </main> <script src="/liquid/js/script.js"></script> </body> </html>

CINXE.COM

truncatewords – Liquid template language