React/Momentjs date formatting with line break

Question

I have a date string that I want to format where the number is under the month:

Jul
 6

and I've tried a few different ways to add a new line:

<Moment format="MMM[\n]d">{`${date}`}</Moment>

but the result I'm getting is:

Jul\n6

Answer 1

If you want to get Tholle's solution working with react-moment, you'll want to do the following:

<Moment style={{whiteSpace: "pre"}} format={"MMM[\n]d"}>{`${date}`}</Moment>

By putting your format within brackets, the [\n] will have the desired effect.

Answer 2

You can add a line break by styling your element with white-space: pre;.

document.getElementById('root').innerHTML = moment().format('MMM [\r\n] D')

#root {
  white-space: pre;
}

<div id="root"></div>
<script src="https://unpkg.com/moment@2.22.2/moment.js"></script>