场景:
在使用element的时间线组件时,activity.content里的内容需要换行,
<el-timeline>
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:icon="activity.icon"
:type="activity.type"
:color="activity.color"
:size="activity.size"
:timestamp="activity.timestamp">
{{activity.content}}
</el-timeline-item>
</el-timeline>
问题 : html 识别不了 '\n', 使用\n换行不生效。
解决方案:
设置如下样式即可:
white-space: pre-line;
完整代码如下:
<el-timeline>
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:icon="activity.icon"
:type="activity.type"
:color="activity.color"
:size="activity.size"
:timestamp="activity.timestamp">
<p style="white-space: pre-line;">{{activity.content}}</p>
</el-timeline-item>
</el-timeline>