在HTML选择选项中保留空格

Question

我有一组带有输入的html文本框，当用户点击“添加”按钮时，使用javascript来获取文本输入并格式化放在HTML选择框中的字符串。这些框中的第一个应该包含一个2个字符的数字，但也可以接受一个空格。格式化的字符串如下所示：

01-ABC-O
02-DEF-I

但是我需要一种方法来显示与其他元素对齐的空白数字

 -GHI-O

当javascript添加选项时，这种类型的条目将显示正常，但是当重新加载页面并且使用值重新填充select时（我使用Java，jsp和struts 1.1，如果这有帮助）它获得相同的值（保留空格）但是空格不再显示在选择控件中（我查看了页面源，它​​看起来与javascript添加选项时相同）。我已经尝试用空格替换 ，但这只是打印字符串“＆nbsp”而不是空格。我也试过使用“pre”html块和css white-space属性，但都没有用。

如果需要进一步澄清，请与我们联系。

Answer 1

你需要用 替换空格，它应该工作 - 注意结束的分号（问题中你的例子中缺少）！当你通过Javascript进行操作时，大多数（全部？）浏览器会自动渲染空格，但是当页面加载时空间就在那里，所有（有时只有一个）浏览器将被忽略。

您还应该将font-family: CSS属性应用于指定单倍间距字体的选择，以确保所有内容都正确排列。

Answer 2

您可以在要输出值的区域上使用pre css样式。

<style type="text/css">
    #element {
         white-space: pre;
    }
</style>

<div id="element">
    stuff goes here
</div>

这将保留div元素中的所有空格（其他元素类型也可以），然后您不必担心使用非中断空格。

Answer 3

你打算通过脚本添加它，你需要使用Escape Codes for Space“％A0”然后用unescape（）解码

logTypeList[i] = new Option(unescape("  kent   Agent".replace(/ /g, "%A0")), "theValue");

Answer 4

您可以使用Unicode字符'SPACE'（U + 0020）代替 （“\ u0020”）

Answer 5

logTypeList[i] = new Option(unescape("  kent   Agent".replace(/ /g, "%A0")), "theValue");

由于不推荐使用unescape，您可能需要使用decodeURI：

logTypeList[i] = new Option(decodeURI("  kent   Agent".replace(/ /g, "%C2%A0")), "theValue");

更多信息在http://www.javascripter.net/faq/mathsymbols.htm

Answer 6

使用javascript创建选择选项时，为了保留空白，使用“\ xa0” - 它是一个NO-BREAK SPACE字符。