下拉框中的格式文本

Question

我目前正在尝试获取代码，并在下拉框中格式化并显示属性的全名。我已经有了代码来显示两个值，但它们没有格式化。问题是并非所有角色都会占用相同的空间。代码可以包含数字或字母。

render : function() {
            this.$el.attr('value', this.model.get('ptTimeCd')).html(
                this.model.get('ptTimeCd') + "&nbsp&nbsp|&nbsp"
                + this.model.get('ptTimeName'));

            return this;
        }

这会产生一个下拉列表，如下所示：

A1 |一些文字 CM |更多文字 GB | ...

有没有办法让所有这些对齐，以便垂直方向始终在同一个地方？

Answer 1

如果我正确理解您的问题，那么variable width, or "proportional" fonts的性质就会出现问题。您需要的是monospaced font / font-family。

也许尝试像这个css规则：

.mono {
    font-family: "Courier New", Courier, Fixed, monospace;
}

然后将css类应用于下拉列表项，看看你是否得到了更符合你想要的东西。

然后，您只需要确保项目的每个“部分”具有相同数量的字符和空格，这是一个相对简单的编程逻辑练习，您可以根据字符串长度填充或修剪每个部分。如果您需要有关该特定部分的帮助，请再次询问。