javascript - 强制空白在选择选项中呈现

Question

编辑：好的，找到了一种用   填充的迂回方式；确实有效。

prodID = prod.ProductID.padEnd(20, "~")
prodID = prodID.replace(/~/g, " ");

我有一个简单的 [select]，我正在通过 javascript 填充 [options]。问题是我想在每个选项中显示多个信息。为了简单起见，我想我会使用 .padEnd 和单空间字体来填充每个元素，然后将所有字符串添加在一起，并且每条信息都将垂直对齐。当然，我忘记了 html 会折叠空格，所以虽然这适用于任何其他字符，但我似乎无法让空格起作用。

空白：pre；顺便说一句，绝对没有任何作用。

[prodSlct] 是要添加选项的选择。

 for (var i = 0; i < data.length; i++) {
        let prod = data[i];
        var opt = document.createElement('option');
        opt.value = prod.ProductID;

        prodID = prod.ProductID.padEnd(20, " ")
        snum = prod.SerialNbrID.padEnd(8, " ");
        istat = prod.InvStatus.padEnd(1," ");
        rsonc = prod.ReasonCodeID.padEnd(5," ");
        opt.innerHTML = prodID + " | " + snum + " | " + istat + " | " + rsonc;

        prodSlct.appendChild(opt);
    }

标签： javascripthtmlcss