Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add br tag with Jade HTML

Tags:

html

pug

I need add br tag but this not working.

table
    tbody
        td Juan Perez
        td 01 33 4455 6677
        td Av José Vasconcelos 804-A Pte. 
            br Col. Los Sabinos,CP. 66220, San Pedro, N.L.
like image 961
cfranco Avatar asked Jan 06 '16 21:01

cfranco


2 Answers

Put the text on a new line with a preceding |:

table
  tbody
    tr
      td Juan Perez
      td 01 33 4455 6677
      td Av José Vasconcelos 804-A Pte.
        br
        | Col. Los Sabinos,CP. 66220, San Pedro, N.L.

You could also place both text nodes on new lines to improve readability as well:

table
  tbody
    tr
      td Juan Perez
      td 01 33 4455 6677
      td
        | Av José Vasconcelos 804-A Pte.
        br
        | Col. Los Sabinos,CP. 66220, San Pedro, N.L.

Output:

<table>
  <tbody>
    <tr>
      <td>Juan Perez</td>
      <td>01 33 4455 6677</td>
      <td>Av José Vasconcelos 804-A Pte.<br/>Col. Los Sabinos,CP. 66220, San Pedro, N.L.</td>
    </tr>
  </tbody>
</table>
like image 155
Josh Crozier Avatar answered Nov 11 '22 16:11

Josh Crozier


An alternative syntax to the one proposed by Josh is the following:

table
  tbody
    tr
      td Juan Perez
      td 01 33 4455 6677
      td. 
        Av José Vasconcelos 804-A Pte. #[br]
        Col. Los Sabinos,CP. 66220, San Pedro, N.L.

The dot at the end of the td is used to enter large blocks of plain text in a simpler way, so the following indented block is treated as text, and you don't need to use the pipe (|) preceding every line. (Source: https://pugjs.org/language/plain-text.html)

Then, to get your explicit <br>, you can use the tag interpolation syntax #[br] to inline it inside the text. (Source: https://pugjs.org/language/interpolation.html)

like image 28
Óscar Gómez Alcañiz Avatar answered Nov 11 '22 18:11

Óscar Gómez Alcañiz