vue 后台返回的数据怎么换行？

最新推荐文章于 2024-06-28 16:31:39 发布

原创最新推荐文章于 2024-06-28 16:31:39 发布 · 2.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue

笔记专栏收录该内容

35 篇文章

订阅专栏

本文介绍如何在Vue项目中使用el-ui组件时，针对长文本内容实现优雅的换行显示。通过添加特定样式属性，如white-space:pre-line，解决了长文本在展示时的换行问题。

ACE-Step

音乐合成

ACE-Step

ACE-Step是由中国团队阶跃星辰（StepFun）与ACE Studio联手打造的开源音乐生成模型。它拥有3.5B参数量，支持快速高质量生成、强可控性和易于拓展的特点。最厉害的是，它可以生成多种语言的歌曲，包括但不限于中文、英文、日文等19种语言

vue 使用el-ui组件获取后台数据的时候，获取的数据较长，需要实现换行，添加 white-space: pre-line 就可实现换行，亦或是使用class样式

代码如下：

<el-form-item label="话术预览" prop class="radio-content">
  <p style="margin:0px;width:100%;word-break:break-all">摘要内容：{{ messageTitle }}</p>
  <p style="margin:0px;width:100%;word-break:break-all; white-space: pre-line;">详情内容：{{ messageContent }}</p>
</el-form-item>