<p>You can split your text </p>

<pre><code>{% set text = block.heroTitle|nl2br %}
{% set splited = text|split('&lt;br /&gt;')%}
{% for part in splited %}
    &lt;span&gt;{{ part }}&lt;/span&gt;
{% endfor %}
</code></pre>

<p>If you need you can use the <a href="https://twig.symfony.com/doc/2.x/filters/trim.html" rel="nofollow noreferrer">trim</a> filter as well</p>

<pre><code>&lt;span&gt;{{ part|trim }}&lt;/span&gt;
</code></pre>

CC BY-SA 3.0
2018-03-08T16:01:25.340Z
That was exactly was I was after! Thanks a lot!
outline4
CC BY-SA 3.0
2018-03-08T10:38:12.540Z
2018-03-08T10:38:12.540Z
Robin Schambach
<p>Following situation: </p>

<p>I have a inline-block title with a background gradient applied. So in order that the background always starts from the left, each line will have to be spanned by a span tag. </p>

<pre><code>Welcome to&lt;br /&gt; 
our site
</code></pre>

<p>should become this: </p>

<pre><code>&lt;span&gt;Welcome to&lt;/span&gt;&lt;br /&gt; 
&lt;span&gt;our site&lt;/span&gt;
</code></pre>

<p>I've started with this: </p>

<pre><code>{{ block.heroTitle|nl2br }} 
</code></pre>

<p>But I'm stuck.<br>
Any help appreciated.</p>

<templating>
Wrap each line with a span tag
# Wrap each line with a span tag

(Asked by: username_0 on 2018-03-08)

Following situation: 
I have a inline-block title with a background gradient applied. So in order that the background always starts from the left, each line will have to be spanned by a span tag. 
Welcome to 
our site

should become this: 
Welcome to 
our site

I've started with this: 
{{ block.heroTitle|nl2br }} 

But I'm stuck.
Any help appreciated.

**Tags:** templating

---

## 1 answers

### Answer by username_1 on 2018-03-08. Score: 2 | Accepted answer

You can split your text 
{% set text = block.heroTitle|nl2br %}
{% set splited = text|split('')%}
{% for part in splited %}
    {{ part }}
{% endfor %}

If you need you can use the trim filter as well
{{ part|trim }}

> **Comments:**
> **username_0**: That was exactly was I was after! Thanks a lot!  

---

