<p>You can also the hyphen/dash '-' modifier for shorter syntax and in place of the spaceless tags. Plus you get a bit more granular control where you want it, like trimming only leading or trailing space.</p>

<h3>Example 1 taken from Twig Docs: <a href="http://twig.sensiolabs.org/doc/templates.html#whitespace-control" rel="noreferrer">Whitespace Control</a>, this would remove whitespace around the if's and output of value.</h3>

<pre><code>{% set value = 'no spaces' %}
{#- No leading/trailing whitespace -#}
{%- if true -%}
    {{- value -}}
{%- endif -%}

{# output 'no spaces' #}
</code></pre>

<h3>Example 2 is a possible real world scenario for retentive space people:</h3>

<pre><code>{%- set metaDescription = 'Page description.' -%}
{%- set metaKeywords = 'word1 word2 word3' -%}
{%- set pageTitle = 'A Title' %}

{% if metaKeywords is defined -%}
    &lt;meta name="keywords" content="{{ metaKeywords }}" /&gt;
{%- endif %}

{% if metaDescription is defined -%}
    &lt;meta name="description" content="{{ metaDescription }}" /&gt;
{%- endif %}

{% if pageTitle is defined -%}
    &lt;title&gt;{{ pageTitle }}&lt;/title&gt;
{%- endif %}
</code></pre>

<p>Rendered output: </p>

<pre><code>&lt;meta name="keywords" content="word1 word2 word3" /&gt;
&lt;meta name="description" content="Page description." /&gt;
&lt;title&gt;A Title&lt;/title&gt;
</code></pre>

CC BY-SA 3.0
2018-04-19T14:05:41.043Z
But why? I mean this is super ugly, super annoying to type, so why isn't this a global default???
leymannx
CC BY-SA 3.0
2016-09-07T16:33:38.003Z
2016-09-07T16:33:38.003Z
b01
<p>You have several different options, depending on what you want to do:</p>

<ul>
<li><p>The spaceless function, which removes whitespace between HTML tags:</p>

<pre><code>{% spaceless %}
    &lt;div&gt;
        &lt;strong&gt;foo&lt;/strong&gt;
    &lt;/div&gt;
{% endspaceless %}

{# output will be &lt;div&gt;&lt;strong&gt;foo&lt;/strong&gt;&lt;/div&gt; #}
</code></pre></li>
<li><p>The trim filter, which removes whitespace from the beginning/end of a string:</p>

<pre><code>{{ block.feature | trim }}
</code></pre></li>
</ul>

CC BY-SA 3.0
2014-09-28T09:58:03.647Z
2014-09-28T09:58:03.647Z
Fred Carlsen
<p>You could always just use the <a href="https://github.com/nystudio107/minify" rel="nofollow noreferrer">Minify plugin</a> and wrap whatever you want in:</p>

<pre><code>{% minify %}

{% endminify %}
</code></pre>

<p>If works with inline CSS/JS, too.</p>

CC BY-SA 3.0
2017-11-22T04:34:06.280Z
2017-11-22T04:34:06.280Z
andrew.welch
<p>Have a look at the twig documentation regarding whitespace control:</p>

<p><a href="https://twig.symfony.com/doc/2.x/templates.html#whitespace-control" rel="noreferrer">https://twig.symfony.com/doc/2.x/templates.html#whitespace-control</a></p>

<p>In short, wrap the area where you want to remove whitespace in <code>{% spaceless %} ... {% endspaceless %}</code>, and use the <code>-</code> character inside tags to trim whitespace before and/or after.</p>

CC BY-SA 3.0
2014-09-28T09:56:44.260Z
2017-11-20T19:32:09.033Z
2017-11-20T19:32:09.033Z
André Elvan
<p>I am using the following block of code in a template:</p>

<pre class="lang-html prettyprint-override"><code>&lt;hr class="rule"&gt;

{% if entry.features | length %}
    &lt;div class="feature-block"&gt;
        &lt;h4 class="is-uppercase"&gt;Features&lt;/h4&gt;
        &lt;ul class="features fa-ul"&gt;
        {% for block in entry.features %}
            &lt;li&gt;&lt;i class="fa-li fa fa-check"&gt;&lt;/i&gt; {{ block.feature }}&lt;/li&gt;
        {% endfor %}
        &lt;/ul&gt;
    &lt;/div&gt;
{% endif %}
</code></pre>

<p>The if statement is adding whitespace to the markup which causes styling issues.</p>

<p><img src="https://i.sstatic.net/Xn5B8.png" alt="Whitespace"></p>

<p>How can I correct this? Do I need to format the code block differently?</p>

<templating><whitespace>
Whitespace created when using if statements
# Whitespace created when using if statements

(Asked by: username_0 on 2014-09-28)

I am using the following block of code in a template:


{% if entry.features | length %}
    
        Features
        
        {% for block in entry.features %}
             {{ block.feature }}
        {% endfor %}
        
    
{% endif %}

The if statement is adding whitespace to the markup which causes styling issues.

How can I correct this? Do I need to format the code block differently?

**Tags:** templating, whitespace


---

## 4 answers

### Answer by username_5 on 2014-09-28. Score: 10 | Accepted answer

Have a look at the twig documentation regarding whitespace control:

<https://twig.symfony.com/doc/2.x/templates.html#whitespace-control>

In short, wrap the area where you want to remove whitespace in `{% spaceless %} ... {% endspaceless %}`, and use the `-` character inside tags to trim whitespace before and/or after.


---

### Answer by username_1 on 2016-09-07. Score: 12

You can also the hyphen/dash '-' modifier for shorter syntax and in place of the spaceless tags. Plus you get a bit more granular control where you want it, like trimming only leading or trailing space.
Example 1 taken from Twig Docs: Whitespace Control, this would remove whitespace around the if's and output of value.
{% set value = 'no spaces' %}
{#- No leading/trailing whitespace -#}
{%- if true -%}
    {{- value -}}
{%- endif -%}

{# output 'no spaces' #}

Example 2 is a possible real world scenario for retentive space people:
{%- set metaDescription = 'Page description.' -%}
{%- set metaKeywords = 'word1 word2 word3' -%}
{%- set pageTitle = 'A Title' %}

{% if metaKeywords is defined -%}
    
{%- endif %}

{% if metaDescription is defined -%}
    
{%- endif %}

{% if pageTitle is defined -%}
    {{ pageTitle }}
{%- endif %}

Rendered output: 


A Title

> **Comments:**
> **username_2**: But why? I mean this is super ugly, super annoying to type, so why isn't this a global default???  

---

### Answer by username_3 on 2014-09-28. Score: 4

You have several different options, depending on what you want to do:

The spaceless function, which removes whitespace between HTML tags:
{% spaceless %}
    
        foo
    
{% endspaceless %}

{# output will be foo #}

The trim filter, which removes whitespace from the beginning/end of a string:
{{ block.feature | trim }}


---

### Answer by username_4 on 2017-11-22. Score: 2

You could always just use the Minify plugin and wrap whatever you want in:
{% minify %}

{% endminify %}

If works with inline CSS/JS, too.


---

