Line Break in HTML Select Option

Line Break in HTML Select Option?

No, browsers don't provide this formatting option.

You could probably fake it with some checkboxes with <label>s, and JS to turn it into a fly out menu.

Line break as html select option value

You can use the character. I'm posting this from my initial comment.

Line Break After Dropdown in HTML

Close the select and add a line break (<br>)

<select required name="shirtsize" size = 1>
  <option value="" selected>Shirt Size</option>
  <option value="S"> S </option>
  <option value="M"> M </option>
  <option value="L"> L </option>
  <option value="XL"> XL </option>
  <option value="XXL"> XXL </option>
  <option value="XXXL"> XXXL </option>
</select>
<br>
<input type="submit" value=Register>

How Do I Add a Line Break After a Dropdown Menu

thing 2 option tag was not closed. that's why br tag was not working.

<form>
    <label for="dropdown" id="dropdown-label">Select one:</label><br>
        <select name="thing" id="dropdown">
          <option value="thing1">Thing 1</option>
          <option value="thing2">Thing 2</option>
        </select>
        <br>
    <div>
    
        <input type="radio" id="num1" name="choices" value="num1">
        <label for="num1">Num1</label><br>
            
        <input type="radio" id="num2" name="choices" value="num2">
        <label for="num2">Num2</label><br>  
    </div>
</form>

Line break in select2 dropdown

If you put a recognizable placeholder in the text of your options, you can search for it and put a line break in the select2 plugin. For this you can simply use the template functions of select2.

But you must not forget that for example screen readers or the google search engine will only see your placeholders and not necessarily the replaced text. So choose your placeholder carefully.

$(document).ready(function() {

  function templateResult(item, container) {
    // replace the placeholder with the break-tag and put it into an jquery object
    return $('<span>' + item.text.replace('[br]', '<br/>') + '</span>');
  }

  function templateSelection(item, container) {
    // replace your placeholder with nothing, so your select shows the whole option text
    return item.text.replace('[br]', '');
  }

  $('.js-example-basic-single').select2({
    templateResult: templateResult,
    templateSelection: templateSelection
  });

});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

<select class="js-example-basic-single" id="select2">
  <option value="10">this is a option x [br]value is 10</option>
  <option value="20">this is option y[br] value is 20</option>
</select>

Can you have multiple lines in an option element?

It's a particular case of displaying HTML tags inside an <option></option> element. As far as I know, browsers behave very differently in this area (Firefox displays even images, other browsers ignore most or all tags) and there isn't a cross-browser solution. You'll probably need to emulate it with JavaScript and a different markup.

At http://www.w3.org/TR/2011/WD-html-markup-20110113/option.html they say:

Permitted contents: normal character
data

... which is defined at http://www.w3.org/TR/2011/WD-html-markup-20110113/syntax.html#normal-character-data

The spec is hard to understand, as usual, but I understand that you cannot insert a literal < (i.e., an HTML tag such as <br>). I cannot find where it defines the behaviour with blank space but most browsers appear to collapse it.

Line Break in HTML Select Option