HTML元素未执行：<br>标签被解析为字符串而非换行问题求助

你的代码返回的带<br>的字符串被当作纯文本渲染，导致标签直接显示而没有实现换行——这是因为渲染环境默认会转义HTML内容以避免XSS风险。以下是不同场景的解决方案：

1. React 项目 #

方法一：JSX 直接拆分（推荐，更安全） #

不需要拼接HTML字符串，直接在JSX中插入换行标签：

return (
  <div>
    {firstFiveLetters}
    <br />
    {remainingLetters}
  </div>
);

方法二：使用 dangerouslySetInnerHTML #

如果必须用HTML字符串，可通过该属性强制解析（注意：仅当内容完全可信时使用，避免XSS）：

return <div dangerouslySetInnerHTML={{ __html: `${firstFiveLetters}<br>${remainingLetters}` }} />;

2. Vue 项目 #

方法一：模板直接拆分（推荐） #

在模板中直接插入变量和换行标签：

<template>
  <div>
    {{ firstFiveLetters }}
    <br>
    {{ remainingLetters }}
  </div>
</template>

方法二：使用 v-html 指令 #

强制解析HTML字符串（同样注意内容可信性）：

<template>
  <div v-html="`${firstFiveLetters}<br>${remainingLetters}`"></div>
</template>

3. 原生 JavaScript #

不要使用textContent设置内容，改用innerHTML解析HTML：

const targetElement = document.getElementById('your-target-element');
const formattedText = `${firstFiveLetters}<br>${remainingLetters}`;
targetElement.innerHTML = formattedText;

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