HelpNeeder
HelpNeeder

Reputation: 6490

Preserve whitespace between concurent HTML elements in raw markup

I need to render raw HTML on page using twig. Issue that I'm having is that when I have two concurrent HTML element separated by white-space, that white-space gets removed.

How can I preserve that space?

I'm rendering HTML string as so:

{{ set _html = entity.html }}
{{ _html|raw }}

For example:

<p>start <span class="some-class">one</span> <span class="some-class">two</span> stop</p>

Is rendered as:

<p>start <span class="some-class">one</span><span class="some-class">two</span> stop</p>

I'm sure that twig raw function is sanitizing my data and therefore my issue.

How I see it:

enter image description here

Upvotes: 1

Views: 824

Answers (2)

Chase
Chase

Reputation: 9362

As answered in here and also in my case, the issue was that I had a {% spaceless %} tag that wrapped my content. So |raw was working correctly but it was the spaceless tag that was stripping the spaces.

Upvotes: 1

HelpNeeder
HelpNeeder

Reputation: 6490

As cale_b recommended, I will be using following CSS hack to add a space before element that lacks my spacing:

.monograph {
  * + span:before {
    content: ' ';
  }
}

Upvotes: 1

Related Questions