项目场景：
使用input输入框，但是想让在input框输入的空格、tab、回车等在网页上直接显示，那么可以使用pre来展示。
解决方案：
element的el-input输入框：
<el-inputtype="textarea":autosize="{ minRows: 8, maxRows: 8 }"style="width:444px"v-model="createWorksheetsForm.problemDesc"placeholder="请输入问题描述":maxlength="5000"show-word-limit></el-input>
保存的数据展示：
<pre>{{worksheetsDetail.problemDesc }}</pre>
样式书写：
<style lang="less" scoped>pre {display: inline-block;padding: 0;margin: 0;font-size: 12px;color: #333;background-color: transparent;border: none;border-radius: 2px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;line-height: 17px;max-width: 100%;white-space: pre-wrap;white-space: -moz-pre-wrap;white-space: -pre-wrap;white-space: -o-pre-wrap;word-wrap: break-word;word-break: break-all;vertical-align: middle;}</style>
展示效果：
注意：
1、pre标签默认是不给换行的，所以需要换行的样式，不加的话太长的句子会一行展示不换行：
pre {max-width: 100%;white-space: pre-wrap;white-space: -moz-pre-wrap;white-space: -pre-wrap;white-space: -o-pre-wrap;word-wrap: break-word;word-break: break-all;vertical-align: middle;}
2、pre有自带的样式，需要将那些样式覆盖掉，换为自己的项目所需样式。
