{spaceless}
Takes out the whitespace between HTML tags, and at both ends of the content.
Syntax
{spaceless} ... {/spaceless}
Description
{spaceless} renders its content first and then removes every run of whitespace that stands between a > and a <, newlines included, and the whitespace at both ends. <li>a</li> <li>b</li> becomes <li>a</li><li>b</li>; the text inside an element keeps its spaces.
That matters where whitespace shows: between inline-block elements a newline in the template is a visible gap, and in a <pre> or a JSON-like attribute every character counts. The template can stay indented for the reader while the output is compact.
For one tag at a time the ~ whitespace control does the same job without a pair: {~items~} takes the whitespace on both sides of the tag, newlines included. {tidy} goes the other way and indents the markup.
The tag only makes sense as a pair: written alone, the strict check reports that it never closes.
Examples
A compact list
The template is indented; the output has no whitespace between the tags.
{spaceless}
<ul>
<li>Red wine</li>
<li>White wine</li>
</ul>
{/spaceless}
- Red wine
- White wine
No gaps between blocks
Inline blocks touch each other once the newlines between them are gone.
<div>
<span style="display:inline-block;padding:4px 10px;background:#2a78d6;color:#fff">one</span>
<span style="display:inline-block;padding:4px 10px;background:#1baf7a;color:#fff">two</span>
</div>
{spaceless}
<div>
<span style="display:inline-block;padding:4px 10px;background:#2a78d6;color:#fff">one</span>
<span style="display:inline-block;padding:4px 10px;background:#1baf7a;color:#fff">two</span>
</div>
{/spaceless}