Are Multi-line Options in Html Select Tags Possible?

Is it possible (using HTML only) to display select with options that span multiple lines each?

It is not possible using html select control.

You can use a div that can act as a dropdown list using JavaScript and css.

not only is it not possible on standard html, but it would then (as an object) become incompatible with the way IOS devices handle the option tag, which is to display a scroll list so it is not even reasonable to want the option tag to behave that way as it would break cross-device compatibility badly and unexpectedly.

as others have answered (i dont have enough reputation to upvote or comment yet) have said, it must be done with css/div styling etc and in that way is a lot more extensible with full html functionality within each of the option tag's as well as (via css styling) being mobile device friendly.

dlolsen

If your case is around iOS truncating long option text, then the solution from How to fix truncated text on <select> element on iOS7 can help.

Add an empty optgroup at the end of the select list:

You can implement like this:

<select>
  <option selected="" disabled="">option first</option>
  <option>another option that is really long and will probably be truncated on a mobile device</option>
  ...
  <optgroup label=""></optgroup>
</select>

As the presentation of a select element is up to the user agent, I'm afraid you can't have that, unless some UA actually implements it. But select as either a ListBox or ComboBox never really had much need for items spanning multiple lines. Furthermore it would greatly confuse users as they are used to one line = one item.

No.

You could use radio buttons instead though, their <label>s can word wrap.

It would be possible by using some JavaScript with CSS styling on HTML elements, easily done with a framework like Dojo Toolkit. Otherwise, use Radio or Checkbox controls.

user3348274

What about:

<!DOCTYPE html>
<html>
<body>

<select size="13" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

</body>
</html>

I don't know if this is what you were looking for, but maybe it could help you.

If you want to select multiple options, you must press Ctrl + click to select more options.

If you want to disable multiselect, just erase the "multiple" parameter from the SELECT tag.

来源：https://stackoverflow.com/questions/1165358/are-multi-line-options-in-html-select-tags-possible

标签

html

html-select