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