保留使用HTML select元素選項空白「空白：預」不工作

我的問題來自HTML選擇下拉菜單無法在其選項保存多個連續的空格。這是一個樣本測試用例和結果。「white-space：pre」class css似乎只適用於除select元素選項以外的任何html元素。是否有任何文獻或案例可以確定此類問題？任何建議/建議有用保留使用HTML select元素選項空白「空白：預」不工作

print "<style>.keepwhitespace { white-space: pre }</style> 
<p class='keepwhitespace'>abc def</p> 
abc def 
<br/> 
<br/>select and options with keepwhitespace 
<select onchange=\"alert('\''+this.value+'\' '+this.value.length)\" class='keepwhitespace'> 
<option class='keepwhitespace'>Any </option> 
<option class='keepwhitespace'>abc def </option> 
<option class='keepwhitespace'> Any </option> 
<option class='keepwhitespace'>abc def </option> 
</select> 
<br/>select with keepwhitespace 
<select onchange=\"alert('\''+this.value+'\' '+this.value.length)\" class='keepwhitespace'> 
<option >Any </option> 
<option >abc def </option> 
<option> Any </option> 
<option>abc def </option> 
</select> 
<br/>options with keepwhitespace 
<select onchange=\"alert('\''+this.value+'\' '+this.value.length)\"> 
<option class='keepwhitespace'>Any </option> 
<option class='keepwhitespace'>abc def </option> 
<option class='keepwhitespace'> Any </option> 
<option class='keepwhitespace'>abc def </option> 
</select>";

結果是這樣的：

預裝正如在「P」元素標籤中可以看出（以及其他任何我嘗試使用，效果很好格式化文本使用「空白」 CSS樣式。然而，選擇不。

As can be seen in the "p" element tag (and any other that I tried using, worked well formatting text with the "whitespace" css style. Yet the select does not.

上選擇要查看的項目值串和串的長度（長度應該是10，而不是如圖7所示，‘ABC DEF’是8個字符在長度）

on selection to view the item value string and length of string (the length SHOULD have been 10 instead of 7, 'abc def' is 8 chars in length) 理解任何幫助。 ;）

LUHFLUH

來源

2012-07-02 luhfluh

表單輸入通常映射到其相關的本地操作系統的控制，使他們能夠很難風格。通常的解決方法是在<option> s中將空白合併到1空間中的方法是使用 而不是通常的空格。

例如。你的選擇之一將是：

<option>&nbsp;Any&nbsp;&nbsp;</option>

更多的自定義外觀，你會完全隱藏真正的選擇元素，並自定義標記和JavaScript更換。

來源

2012-07-02 12:28:11 Teoulas

感謝@Teoulas，得到了你的建議的洞察力。我取代所有空白 '' 與 ' ' 使用str_replace函數'$ STR1 = str_replace函數（」」，「」，$ STR1）; ..... '對於每個選項值。有點糟糕的是，這些問題至少沒有被記錄下來......花了一段時間才找到你的建議;）！再次感謝 – luhfluh

這個解決方案需要注意的一件事是，因爲它是一個不間斷的空間，所以不會中斷。這意味着你所做的任何長文本都將保留在一行中。如果你知道你正在修改的文本很短，那麼這個解決方案效果很好。在我的情況下，它並不適用於用戶輸入，通常很長。 – Colin

保留使用HTML select元素選項空白「空白：預」不工作

回答

相關問題