Javascript 如何在select2数据行的一行中显示多个空白字符？

我正在使用并且使用

{data:[{id:1，text:“…”}]

方法来定义选项。我希望通过对子字符串进行分组来格式化每个选项，该子字符串由多个空格字符组成。类似于这样：

{data: [
    {id:1, text: "Trees     -     Oak"},
    {id:2, text: "Trees     -     Pine"},
    {id:3, text: "Seas      -     North Sea"},
    {id:4, text: "Seas      -     Baltic Sea"}
]}

当我这样做时，它们在结果下拉列表中显示为一个空格（处理空格的默认HTML方式）。当我使用

而不是空格时，它们在下拉列表中显示为字符串“

”，而不是空格

{data: [
    {id:1, text: "Trees   -   Oak"},
    {id:2, text: "Trees   -   Pine"},
    {id:3, text: "Seas   -   North Sea"},
    {id:4, text: "Seas   -   Baltic Sea"}
]}

有没有办法保留我在数据项的

text

属性中定义的所有空格？

是否要改用

或者尝试添加

white-space: pre;

在选择项的css类中，保留字符串中的所有空白

正如koenpeters在评论中所说，对于默认主题，css将如下所示：

.select2-container--default .select2-results__option {
  white-space: pre;
}

你不想改用它吗

或者尝试添加

white-space: pre;

在选择项的css类中，保留字符串中的所有空白

正如koenpeters在评论中所说，对于默认主题，css将如下所示：

.select2-container--default .select2-results__option {
  white-space: pre;
}

---

Yuri Gor给出的答案的另一种选择是使用

并将

escapeMarkup

包含到select2创建中

$("#isOfTheSelectNode").select2({
    escapeMarkup: function (m) { return m; }
});

缺点是：

• 不会转义任何html标记，这可能会导致奇怪的错误

  选项

  元素（如果文本包含HTML）
• 搜索空间时，包含
  的项目将不匹配

---

我认为如果你只想让多个空格呈现为这样，尤里·戈尔的答案会更好。

尤里·戈尔给出的答案的另一种选择是使用

并将

转义标记

包含到select2创建中

$("#isOfTheSelectNode").select2({
    escapeMarkup: function (m) { return m; }
});

缺点是：

• 不会转义任何html标记，这可能会导致奇怪的错误

  选项

  元素（如果文本包含HTML）
• 搜索空间时，包含
  的项目将不匹配

---

我认为，如果你只想让多个空格被渲染成这样，Yuri Gor的答案会更好。

在你的风格中添加

空白：正常；

.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: inline;
    list-style: none;
    padding: 0;
    white-space: normal;
}

---

在样式中添加

空白：普通；

.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: inline;
    list-style: none;
    padding: 0;
    white-space: normal;
}

---

然后尝试设置空白：pre；在select的条目css类中，您可能已经确定了要修补的确切类的名称吗？我会将它的名称添加到答案中，以便其他阅读此内容的人可以节省一些时间。我使用了

。选择2 container--default。选择2-results\uu选项

，但请记住，这仅适用于默认主题。然后尝试设置white space:pre；在select的项目css类中，您可能已经确定了要修补的确切类名称？我会将其名称添加到答案中，以便其他阅读此内容的人可以节省一些时间。我使用了

。select2 container--default。select2-results\uu选项

，但请记住，这只适用于默认主题。为什么不使用实际的非破坏性主题呢空格字符，它是

\u00a0

？啊，是的，我不知道那一个。我试过了，效果也很好。缺点是搜索空格时，

\u00a0

不会匹配。但是，除此之外，这是一个很好的选择。为什么不使用实际的不间断空格字符，即

\u00a0

？啊，是的，我没有你知道这个。我试过了，它也很管用。缺点是当你搜索一个空间时，

\u00a0

将不匹配。但是，除此之外，这是一个很好的选择。在你的情况下，你可以在你的选项中使用一些额外的html/css，像树一样的smth，并在css类中设置每个片段所需的宽度和文本对齐方式（并根据您的意愿设计所有这些内容）我从未使用过select2，但在纯html select中，每个选项都可能有“值”attr，所以，可能是，select2中的搜索可以配置为以该值为目标，而不是以内部文本为目标？如果是这样，您可以使用干净的文本填充值，而不需要额外的标记或html条目。在您的情况下，您可以在选项中使用一些额外的html/css，例如smth，并在css类中设置每个段所需的宽度和文本对齐方式（并根据您的意愿设置所有这些内容的样式）我从未使用过select2，但在纯html select中，每个选项都可能有“value”属性，因此，可以将select2中的搜索配置为针对这些值而不是内部文本？如果是，您可以使用干净的文本填充值，而不需要额外的标记或html条目。