CODEWITHSUNDEEP
htmlpug
CodeConnoisseur
CodeConnoisseur

Reputation: 1869

Multi-Line text split on multiple HTML elements with PUG

I am creating a pug template and I am trying to figure out how to output multi line text BUT split on an anchor tag.

I am brand new to pug, so my knowledge is limited to a day.

header.pug

div.col-12
  a(href="https://somelink.com" target="_blank").
    Learn more
about safety precautions

Desired Output

<div class="col-12">
   <a href="https://somelink.com" target="_blank">Learn more</a>about safety precautions
</div>

But instead my text of about safety precautions keeps showing up inside of the </a> tag.

Upvotes: 1

Views: 1515

Answers (1)

Graham
Graham

Reputation: 7802

If you want text inline you can use the span element which won't break the paragraph:

div.col-12
  span
    a(href="https://somelink.com" target="_blank").
      Learn more
  span.
    about safety precautions

You could also use the pipe syntax in pug:

div.col-12
  a(href="https://somelink.com" target="_blank").
    Learn more
  | about safety precautions

Personally I prefer the span as more web developers who follow me will understand what's going on. No real negatives to either method though.

Upvotes: 4

Related Questions