'How to add a line break in pug?

I want the definition to be below the search bar. Now it's next to the search button. How can I add a line break in pug?

My code:

  h1 Type any word here...
  input(type='text' id="search" autofocus)
  button(id="btnSearch") Search 
  strong Definition
pugline-breaks


Solution 1:[1]

You can add a <br> (line break) element the same way you add other elements in Pug.

If you want a line break between your <input> and <strong> elements, you can do this:

h1 Type any word here...
input(type='text', id='search', autofocus)
button(id='btnSearch') Search
br
strong Definition

However, in general, line breaks should not be used to control layout of elements. I'd suggest wrapping your form elements in a block element like a <div> or <form> which will make the definition flow below it.

h1 Type any word here...
div
  input(type='text', id='search', autofocus)
  button(id='btnSearch') Search
strong Definition

It seems like you're creating a webpage that allows users to look up definitions. If that's true, you should consider using an <output> element to display the definition of the looked-up word. Also you can mark up the term using a <dfn> (definition) element:

h1 Look up a word.
form
  .input
    input#search(type='text', autofocus)
    button#search-button Look Up
  .output
    output(for='search')
      strong #[dfn Cat]:
      | a carnivorous mammal long domesticated as a pet and for catching rats and mice.

This will render:

<h1>Look up a word.</h1>
<form>
  <div class="input">
    <input id="search" type="text" autofocus="autofocus"/>
    <button id="search-button">Look Up</button>
  </div>
  <div class="output">
    <output for="search"><strong><dfn>Cat</dfn>:</strong> a carnivorous mammal long domesticated as a pet and for catching rats and mice.</output>
  </div>
</form>

Solution 2:[2]

First thing you this is not the way to add ids in pug. your should write it after the tag name with a #.

h1 Type any word here...
input#search(type='text' autofocus='')
button#btnSearch Search
br
strong Definition

There is an HTML to pug converter you can check your answer with. https://html-to-pug.com/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2

Related Questions