如何在 select2 數據行中的一行中顯示多個空格字符？

Question

我正在使用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屬性中定義的所有空格？

Answer 1

您不想改用optgroups嗎？

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

或嘗試添加

white-space: pre;

在選擇項的 css-class 中保留字符串中的所有空格。

正如 koenpeters 在評論中所說，默認主題 css 將如下所示：

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

Answer 2

Yuri Gor 給出的答案的另一種選擇是使用  並將escapeMarkup包含到select2 創建中。

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

缺點是：

• 任何 html 標記都不會被轉義，如果文本包含 HTML，這可能會導致奇怪的option元素。
• 包含  搜索空間時不會匹配。

如果您只想允許渲染多個空間，我認為 Yuri Gor 的答案會更好。

Answer 3

添加white-space: normal; 你的風格

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