# Whitespace

This page explains ways to manage whitespace rendering. It demonstrates how the site treats whitespace, illustrating common techniques, pitfalls, and workarounds to achieve needed formatting.

## Inserting newlines

Code

Result

What’s up?

How are you?

### Two spaces at end of line

Code

Result

Hello
there

NB: This is a Markdown feature; note that there is no whitespace rendered after “Hello” at the end of the line.

### Two backslashes at end of line

Code

Result

What happens
if we use backslashes?

NB: This is a Kramdown feature; note that there is a space included after “What happens” at the end of the line, because we included one before the backslashes.

Code

Result

Lions
and tigers

## Aligning text

Most fonts are variable width, and so you cannot rely on the characters lining up over multiple lines:

Code

Result

+-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=+
| -=-=- Initializing Invincibility -=-=- |
+-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=+

### Aligning via code fences

If you need fixed-width font, you can use code fences:

Code

Result

+-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=+
| -=-=- Initializing Invincibility -=-=- |
+-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=+


### Aligning via span style

If you really just want a fixed-width font, without additional styling, you can use the style attribute on a surrounding <span> element:

Code

Result

+-=-=-=-=-=-=-=-=-=-=-=-=-+
| -=- I’m Invincible! -=- |
+-=-=-=-=-=-=-=-=-=-=-=-=-+

But if you do this on a block-level HTML element such as <div>, you won’t be able to mix in Markdown anymore:

Code

Result

What are you going to do, bleed on me?

+-=-=-=-=-=-=-=-=-=-=-=-=-+\\ | -=- I'm *Invincible!* -=- |\\ +-=-=-=-=-=-=-=-=-=-=-=-=-+

You’re a loony.

…unless you add markdown=1 to the element in question:

Code

Result

What are you going to do, bleed on me?

+-=-=-=-=-=-=-=-=-=-=-=-=-+
| -=- I’m Invincible! -=- |
+-=-=-=-=-=-=-=-=-=-=-=-=-+

You’re a loony.

## Multiple spaces in a row

Normally, multiple spaces are squashed into one:

Code

Result

It’s a REALLY big deal!

If you want the extra spaces to stay, use HTML’s &nbsp; code:

Code

Result

It’s a    REALLY    big deal!

## Preventing lines from wrapping at whitespace

Normally, lines can wrap wherever there is whitespace:

Code

Result

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

If you don’t want it to wrap at a particular place, you can use &nbsp; instead of a regular space, but for whole paragraphs as above, it quickly becomes tiresome. Another way is to use a styled span:

Code

Result

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Markdown kicks in, treating it as a block of code. Even if a subsequent line is not indented!