项目场景:
使用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有自带的样式,需要将那些样式覆盖掉,换为自己的项目所需样式。