Line Breaks in Headings

Tagged in:
• hugo

Some of my page headings were quite long so I wanted the choice to choose where to break them.

The headings are in the frontmatter of each page in the title key.

To break a title use either:

1. the \n for new line in the text where you want the break title: title: One line\n into two or
2. use pipe symbol is used to enforce the breaks and a hyphen to prevent a break at the end.

1title: |-
2  My very long winded
3  Extra long Headings  

NB. keep the spacing the same on each line.

HTML

In HTML line breaks and white space are ignored. To fix this use the CSS:

1h1 {
2    white-space: pre-line;
3}

According to W3 schools:

Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks

link

• ◀ Previous
• Next ▶