Vue.js如何将姓名中的空格替换为换行实现分行显示

问题原因 #

HTML默认会将换行符\n识别为普通空白字符，不会触发换行，所以你在JS中替换得到的\n无法在页面上产生分行效果。

解决方案 #

方案1：使用CSS适配（最推荐，无XSS风险） #

不用修改现有的formatUserName逻辑，只要给姓名展示的容器添加white-space: pre-line属性即可，该属性会让浏览器识别文本中的\n换行符：

<template>
  <!-- 其他代码不变 -->
  <v-card-title class="text-break">{{ formatUserName(user.name) }}</v-card-title>
  <!-- 其他代码不变 -->
</template>

<style scoped>
.text-break {
  white-space: pre-line;
}
</style>

方案2：替换为
标签配合v-html渲染 #

将空格替换为HTML的换行标签<br>，同时使用v-html指令渲染内容（注意：如果姓名是用户可自行输入的内容，该方案存在XSS注入风险，仅适用于内容完全可控的场景）：

// 修改formatUserName方法
formatUserName(value) {
  return value.replace(/\s/g, '<br>')
}

<!-- 模板部分修改渲染方式 -->
<v-card-title v-html="formatUserName(user.name)"></v-card-title>

方案3：拆分姓名直接渲染 #

不需要额外的处理方法，直接在模板中将姓名按空格拆分后分行渲染，无安全风险：

<v-card-title>
  <span v-for="(namePart, index) in user.name.split(' ')" :key="index" class="d-block">
    {{ namePart }}
  </span>
</v-card-title>

内容的提问来源于stack exchange，提问作者user12763413