你能在<option>元素中有多行吗?

Upv*_*ote 13 html javascript css jquery html-select

有没有办法在元素中有多行<option>

像这样:

 -------------------------
| Normal <option> element |
 -------------------------
| <option> element broken |
| onto two lines          |
 -------------------------
| Normal <option> element |
 -------------------------
Run Code Online (Sandbox Code Playgroud)

有没有HTML/CSS方法,还是我应该使用JavaScript?

小智 8

这可能不是你想要的,但你可以通过使用"optgroup"标签获得每个选项两行,例如:

<select>
  <optgroup label="Click below for 'yes'">
    <option value="yes">Yes</option>
  </optgroup>
  <optgroup label="Click below for 'No'">
    <option value="no">No</option>
  </optgroup>
</select>
Run Code Online (Sandbox Code Playgroud)


Álv*_*lez 5

这是在<option></option>元素中显示HTML标记的特殊情况.据我所知,浏览器在这个领域表现得非常不同(Firefox显示图像,其他浏览器忽略大多数或所有标签),并且没有跨浏览器解决方案.您可能需要使用JavaScript和不同的标记来模拟它.

http://www.w3.org/TR/2011/WD-html-markup-20110113/option.html,他们说:

允许的内容:正常的字符数据

...在http://www.w3.org/TR/2011/WD-html-markup-20110113/syntax.html#normal-character-data中定义

像往常一样,规范很难理解,但我知道你不能插入一个文字<(即一个HTML标签,如<br>).我无法找到用空格定义行为的位置,但大多数浏览器似乎都会将其折叠.