前端使用el-input输入框保存的数据，怎么样在展示时显示输入的空格、tab、回车，可以使用pre标签

项目场景：

使用input输入框，但是想让在input框输入的空格、tab、回车等在网页上直接显示，那么可以使用pre来展示。

---

解决方案：

element的el-input输入框：

                    <el-input
                      type="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有自带的样式，需要将那些样式覆盖掉，换为自己的项目所需样式。