Guidebook

# 富文本渲染

文本中含有\n等换行符，需要显示时渲染出来

首先想到的是el-input type="textarea" 可以用来渲染

但是又不需要编辑功能，虽然可以用disabled来禁用编辑，但是总归不好看

需求其实就是一个多行纯展示的文本框

方法一：用 white-space: pre-wrap;

<template>
  <div class="text-box">
    {{ text }}
  </div>
</template>

<script setup lang="ts">
const text = `第一行
第二行
第三行`;
</script>

<style scoped>
.text-box {
  white-space: pre-wrap; /* 保留换行和空格 */
  word-break: break-word; /* 避免长单词溢出 */
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

方法二：用 pre

<template>
  <pre class="pre-box">{{ text }}</pre>
</template>

<script setup lang="ts">
const text = `第一行
第二行
第三行`;
</script>

<style scoped>
.pre-box {
  font-family: inherit; /* 使用正常字体 */
  white-space: pre-wrap; /* 自动换行 */
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

← X6 →