vue后台多行文本回车换行，网站页面显示换行

渐绾

已于 2024-05-11 10:28:43 修改

阅读量441

点赞数 5

文章标签： vue.js 前端 javascript

于 2024-05-11 10:26:33 首次发布

本文链接：https://blog.csdn.net/weixin_57792130/article/details/138704227

版权

实现效果代码如下

后台编辑代码

<el-form-item label="资源简介介绍" prop="resourceIntroduce">
    <el-input 
        class="textarea" 
        v-model="queryParams.resourceIntroduce"
        type="textarea"
        placeholder="请输入资源简介介绍"
        clearable
        style="width: 100%"
    />
</el-form-item>


css


.textarea /deep/ .el-textarea__inner {
    //保留文本中的空白、换行符；文本存在 <br> 或文本中有换行符时，或者遇到框的宽度约束时，文本都才    会换行
    white-space: pre-wrap;   
}

网页显示代码

<div class="topic-text" style="text-align: justify">
    <!--这里是我显示后台返回数据的，这个可以忽略，只复制样式就可以-->
    " + res.data.resourceIntroduce +"
</div>



.topic-text {
  //页面上显示换行必须加上该属性
  white-space: pre-line;
}