Whitespace control
In Liquid, you can include a hyphen in your tag syntax {{-
, -}}
, {%-
, and -%}
to strip whitespace from the left or right side of a rendered tag.
Normally, even if it doesn't output text, any line of Liquid in your template will still output an empty line in your rendered HTML:
Input
Order history:
{% if customer %}
Welcome back, {{ customer.first_name }}
{% endif %}
Notice that there are two empty lines in the rendered template:
Output
Order history:
Welcome back, Martina
By including hyphens in your Liquid tag, ({%-
and -%}
), you can strip the generated whitespace from the rendered template:
Input
Order history:
{%- if customer -%}
Welcome back, {{ customer.first_name }}
{%- endif -%}
Output
Order history:
Welcome back, Martina
If you need to control the whitespace on only one side of the Liquid tag, you can include the hyphen on just the opening or closing tag. In the example below, a hyphen is on the closing Liquid tag around customer.name
.
Input
Hello, {{ customer.name -}} !
Output with whitespace control
Hello, Martina!