Kendo UI JS自动去除字符串多余空格问题咨询

1. 针对Kendo Grid组件 #

如果是在Grid中显示或编辑时丢失连续空格，需要从显示和编辑两个环节处理：

• 显示列保留空格：开启列的encoded: false避免内容转义，同时通过CSS强制浏览器保留连续空格

  $("#grid").kendoGrid({
    columns: [
      { 
        field: "text", 
        title: "文本",
        encoded: false,
        template: "<span style='white-space: pre-wrap;'>#= text #</span>"
      }
    ],
    dataSource: [ { text: "Hello  World" } ]
  });
  

  注：white-space: pre-wrap既保留连续空格，又支持自动换行，避免内容溢出。

• 编辑时保留空格：给编辑器配置normalizeSpace: false，关闭自动合并空格的默认行为

  columns: [
    {
      field: "text",
      editor: function(container, options) {
        $("<input>")
          .appendTo(container)
          .kendoTextBox({
            normalizeSpace: false // 核心配置，禁止合并空格
          });
      }
    }
  ]
  

2. 针对Kendo TextBox/Input类组件 #

初始化组件时直接设置normalizeSpace: false，即可完全保留原始文本的空格：

$("#textbox").kendoTextBox({
  normalizeSpace: false,
  value: "Hello  World"
});

3. 通用兜底方案：手动转换空格为HTML实体 #

如果是其他组件场景，可在数据绑定前将普通空格替换为HTML非换行空格 ，同时确保组件允许渲染HTML（设置encoded: false）：

const originalText = "Hello  World";
// 替换所有空格为 
const formattedText = originalText.replace(/ /g, " ");
// 将处理后的文本传入Kendo组件

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