带有换行符的React / Momentjs日期格式

Question

我有一个要格式化的日期字符串，其中数字在月份以下：

Jul
 6

并且我尝试了几种不同的方式来添加新行：

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

但是我得到的结果是：

Jul\n6

Answer 1

您可以通过使用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>

Answer 2

如果您想让Tholle的解决方案与react-moment一起使用，您将需要执行以下操作：

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

通过将格式放在方括号中，[\n]将具有预期的效果。