vue实现文本换行

使用 white-space CSS 属性

通过 CSS 的 white-space 属性控制文本换行行为。设置为 pre-line 或 pre-wrap 可保留换行符并自动换行。

.text-wrap {
  white-space: pre-line; /* 合并空格，保留换行符并自动换行 */
}

使用 v-html 指令替换换行符

将文本中的 \n 替换为 <br> 标签，再通过 v-html 渲染。注意需确保内容安全。

// 在数据处理阶段替换换行符
const text = "第一行\n第二行";
const formattedText = text.replace(/\n/g, '<br>');

<div v-html="formattedText"></div>

结合 split 和 v-for 拆分文本

将文本按换行符拆分为数组，循环渲染每行内容。

<template>
  <div>
    <p v-for="(line, index) in text.split('\n')" :key="index">{{ line }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      text: "第一行\n第二行"
    };
  }
};
</script>

使用 <pre> 标签保留格式

<pre> 标签会保留原始文本的换行和空格，适合显示代码或预格式化文本。

<pre>{{ text }}</pre>

通过 CSS 的 word-break 强制换行

长单词或连续字符可通过 word-break: break-all 强制换行。

.force-wrap {
  word-break: break-all;
}