如何在select2数据行中的一行中显示多个空格字符? [英] How can I show more than one white space character in a row in a select2 data row?

问题描述

我正在使用 Select2 ，并且我使用{data: [{id:1, text: "..."}]方法来定义选项.我想通过将使用多个空格字符组成的子字符串分组来格式化每个选项.像这样:

I'm using Select2 and I use the {data: [{id:1, text: "..."}] approach to define the options. I want to format each option by grouping the substring it's made up of using more than one white space character. So something like this:

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

当我这样做时，它们在结果下拉列表中显示为一个空格(处理空格的默认HTML方式).当我使用 代替空格时，它们在下拉列表中显示为字符串" "而不是空格.

When I do this they show up as one space in the resulting dropdown (the default HTML way of dealing with spaces). When I use   instead of space they show up as the string " " in the dropdown instead of as spaces.

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

是否可以保留我在数据项的text属性中定义的所有空间?

Is there a way to preserve all the spaces I define in the text attribute of the data item?

推荐答案

您不想使用

或尝试添加

white-space: pre;

在select的CSS类中，以保留字符串中的所有空白.

in css-class of select's item to preserve all the whitespaces in the string.

正如koenpeters在评论中所说，默认主题CSS如下所示:

As koenpeters said in comments,for default theme css will look like:

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

这篇关于如何在select2数据行中的一行中显示多个空格字符?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！