javascript - ReactMomentjs date formatting with line break - Stack Overflow

admin管理员组

文章数量:1289581

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

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

• javascript
• reactjs
• momentjs

Share Improve this question Follow edited Jul 6, 2018 at 20:51 Tholle 113k2222 gold badges208208 silver badges197197 bronze badges asked Jul 6, 2018 at 19:42 xyzcodexyzcode 21911 gold badge77 silver badges1616 bronze badges 2

• I assume you're using npm react-moment – Chris Commented Jul 6, 2018 at 21:10
• that's correct. – xyzcode Commented Jul 6, 2018 at 22:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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.

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./[email protected]/moment.js"></script>

本文标签： javascriptReactMomentjs date formatting with line breakStack Overflow