uni-app 自动格式化会导致换行自动加

开发环境	版本号	项目创建方式
Mac	13.6.4 (22G513)	HBuilderX

# 示例代码：

```text
<text class="words" [@click](/user/click).stop="sellxj()"  
    :style="'width: '+ (windowWidth - 90) +'px;'" >第1集  
共10  
<选集>  
</text>

操作步骤：

<text class="words" [@click](/user/click).stop="sellxj()"  
    :style="'width: '+ (windowWidth - 90) +'px;'" >第1集  
共10  
<选集>  
</text>

预期结果：

应该渲染的时候没有br才对

实际结果：

换行渲染之后自动出现br

bug描述：

编辑器自动格式化 nvue 文件会导致自动增加br换行

更多关于uni-app 自动格式化会导致换行自动加 的实战教程也可以访问 https://www.itying.com/category-93-b0.html

htzhanglong 1楼

更多关于uni-app 自动格式化会导致换行自动加 的实战教程也可以访问 https://www.itying.com/category-93-b0.html

在uni-app开发过程中，自动格式化代码确实是一个方便的功能，但有时候它可能会导致一些不期望的行为，比如换行被自动转换为 标签。这通常发生在模板（HTML）部分，尤其是在处理文本内容时。为了解决这个问题，我们需要确保在格式化代码时，保持文本的原始格式不被意外修改。

问题分析

在HTML中，连续的空白字符（包括空格、制表符和换行符）通常会被浏览器合并为一个空格。当你希望在文本中保留换行符时，可以使用<pre>标签或者通过JavaScript手动处理这些字符，将它们替换为 。然而，自动格式化工具可能在没有明确指示的情况下，将这些换行符转换为 ，这通常不是预期的行为。

解决方案

1. 使用`<pre>`标签

<pre>标签会保留文本中的所有空白字符和换行符。如果你的文本内容需要保持格式，可以考虑使用<pre>标签包裹这些内容。

<template>
  <view>
    <pre>
      这是第一行
      这是第二行
      这是第三行
    </pre>
  </view>
</template>

2. 手动处理换行符

如果你不想使用<pre>标签，可以在数据绑定时手动处理换行符。例如，在JavaScript中将换行符\n替换为 。

// 在页面的data中定义一个文本变量
data() {
  return {
    formattedText: ''
  };
},
onLoad() {
  const rawText = "这是第一行\n这是第二行\n这是第三行";
  this.formattedText = rawText.replace(/\n/g, '<br>');
}

<template>
  <view>
    <rich-text :nodes="formattedText"></rich-text>
  </view>
</template>

注意这里使用了<rich-text>组件来渲染HTML字符串，因为直接在文本节点中插入HTML是不安全的，也不会被解析。

总结

自动格式化工具在提升代码可读性方面非常有用，但有时候它们的行为可能与我们的预期不符。在处理文本格式时，了解HTML的默认行为以及如何使用<pre>标签或手动处理换行符是非常重要的。通过上述方法，你可以有效地控制文本在uni-app中的显示格式，避免自动格式化带来的不期望行为。

uni-app 自动格式化会导致换行自动加<br>