uni-app 自动格式化 nvue text 内容换行

uni-app 自动格式化 nvue text 内容换行

开发环境 版本号 项目创建方式
HbuilderX 3.2.5

操作步骤：

如代码

预期结果：

内容不换行

实际结果：

内容换行

bug描述：

...长嵌套...
<text ...长属性...>...内容...<\/text>
...长嵌套...

...长嵌套...
<text ...长属性...>...内 ---------(shift+alt+f 格式化后内容自动换行,由于nvue页面内容换行显示也就换行所以会错位显示)
容...<\/text>
...长嵌套...

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

1 回复

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


在 nvue 页面中，<text> 标签的格式化换行确实会导致实际渲染换行，这是由 nvue 的渲染机制决定的。

原因分析：

  1. nvue 使用原生渲染，<text> 标签内的文本内容会直接映射到原生文本组件
  2. 原生文本组件会将源代码中的换行符（包括格式化产生的换行）渲染为实际换行
  3. HBuilderX 的格式化工具在格式化长代码时，会在适当位置添加换行符以保证代码可读性

解决方案：

方案1：关闭格式化（推荐） 在 HBuilderX 中，针对 nvue 文件关闭自动格式化：

// 在项目根目录创建 .prettierrc 文件
{
  "overrides": [
    {
      "files": "*.nvue",
      "options": {
        "htmlWhitespaceSensitivity": "ignore"
      }
    }
  ]
}

方案2：手动调整代码结构 避免在 <text> 标签内使用过长的属性或内容，将长内容拆分为多个 <text> 标签：

<!-- 替换前 -->
<text class="long-class" style="long-style">很长很长的文本内容</text>

<!-- 替换后 -->
<text class="long-class" style="long-style">
  很长很长的文本内容
</text>
<!-- 或拆分为多个text -->
<text class="part1">第一部分内容</text>
<text class="part2">第二部分内容</text>

方案3：使用条件注释 在需要保持单行的 <text> 标签周围添加格式化忽略注释：

<!-- prettier-ignore -->
<text class="long-class">保持单行的长内容</text>

方案4：调整编辑器设置 在 HBuilderX 设置中，调整 HTML 格式化选项，减少最大行长度：

工具 → 设置 → 编辑器设置 → 语言 → HTML → 格式化
将 "Print Width" 设置为更大值（如200）
回到顶部