Vue实现字符串换行

因为我用的Element UI框架，所以是打开F12查看表格内文字的父级元素，给这个父级元素加上。图中加入\n是起换行的作用，但是光写这个是不够的。，那么还是不生效的，需要删掉标签中的scoped。在网上查了很多种方法，但都没有效果。一般写到这里，已经可以实现效果了。还有一种比较简单的方法。

小马大咖

4000人浏览 · 2022-11-04 22:28:34

小马大咖 · 2022-11-04 22:28:34 发布

先上效果图：
在这里插入图片描述
数据格式：字符串

在这里插入图片描述
代码如下：

<template>
      <div style="margin-top:20px">
        <el-table :data="tableData" style="width: 100%" border >
          <el-table-column
            prop="parameter"
            label="参数"
          ></el-table-column>
          <el-table-column
            prop="type"
            label="类型"
          ></el-table-column>
          <el-table-column
            prop="describe"
            label="描述"
          ></el-table-column>
        </el-table>
      </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          parameter: "parameter1",
          type: "String",
          describe: "类名",
        },
        {
          parameter: "parameter2",
          type: "Number",
          describe: "1：中国地图彩色版 \n2：中国地图暖色版\n3：中国地中国地图蓝黑版\n4：中国地图灰色版",
        },
      ],
    };
  },
  },
};
</script>
<style >
.cell{
  white-space: pre-wrap !important;
}
</style>

在网上查了很多种方法，但都没有效果。
图中加入\n是起换行的作用，但是光写这个是不够的。
还需要在样式里加上style="white-space: pre-wrap;"
一般写到这里，已经可以实现效果了。

因为我用的Element UI框架，所以是打开F12查看表格内文字的父级元素，给这个父级元素加上
white-space: pre-wrap

提示：
如果你的CSS里有<style scoped>，那么还是不生效的，需要删掉标签中的scoped。

还有一种比较简单的方法v-html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
       	   <span v-html='msg'></span>
        </div>
    </body>
    <script src="../vue.js"></script>
    <script>
       var vm = new Vue({
            el: '#app',
            data: {
              msg:'这是一个消息<br>这是另外一个消息',
            }
        })
    </script>
</html>