Project scenario:
Use the input input box, but if you want the spaces, tabs, carriage returns, etc. entered in the input box to be displayed directly on the web page, you can use pre to display it.
solution:
element's el-input input box:
<el-input
type="textarea"
:autosize="{ minRows: 8, maxRows: 8 }"
style="width:444px"
v-model="createWorksheetsForm.problemDesc"
placeholder="请输入问题描述"
:maxlength="5000"
show-word-limit>
</el-input>
Saved data display:
<pre>{
{
worksheetsDetail.problemDesc }}</pre>
Style writing:
<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>
Display of results:
Notice:
1. The pre tag does not allow line breaks by default, so a line break style is required. Without it, sentences that are too long will be displayed on one line without line breaks:
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 has its own styles. You need to overwrite those styles and replace them with the styles required by your own project.