htmldrupaltwigdrupal-8drupal-commerce

How to make the address code on one line with TWIG?

I have a TWIG code to display the address of a store.

Currently the address is rendered on 3 lines.

How to make the address code on one line ?

{{ store.address|render|trim|replace({'<br>': ' - '})|striptags|raw }}

enter image description here

Solution

  • Your are outputting the address inside a <pre> tag. The white-space of the <pre> tag is set to pre by default. See here for more information about this.

    So you have 2 options

    1. Replace the <pre> tag with a <div>

    <div>
Lorem
        ipsum
            dolor
                sit
                    amet
</div>

    1. Overrule the white-space of the <pre> with css

    pre.spaceless {
  white-space: normal;
}
    <pre>
Lorem
    ipsum
        dolor
            sit
                amet
</pre>
<pre class="spaceless">
Lorem
    ipsum
        dolor
            sit
                amet
</pre>