jquery - 在显示的结果中自动从元素值中删除空格

我将query的值分配给queryVal。如果字符串中有多个空格，它将自动从网页上显示的值中删除，但是在调试中，$（“＃queryVal”）。text（）显示该值没有任何问题。
例如，如果查询为“ abc def ghi”（此处也删除了空格），我将在网页abc def ghi上获取该值。

    query = CreateQuery(currentDataSource, false);

    $("#queryVal").text("");
    $("#queryVal").text(query);

    if ((query == "" && queryFilter == undefined) || queryFilter == query) {
        DisableBtn("btnSaveQuery");
    }
    else {
        EnableBtn("btnSaveQuery");
    }

我不知道是什么引起了问题

最佳答案

这就是HTML的工作方式：一系列空格字符显示为单个空格。

如果要更改此设置，请在元素中应用类似于pre的white-space样式之一，例如：

#queryVal {
    white-space: pre;
}

（或者，当然使用pre元素。）

例：

$("#queryVal").text("There    are    multiple   spaces   here.");

#queryVal {
  white-space: pre;
}

<div id="queryVal"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>