In iOS, how does one process the select drop-down list text that is too long to be truncated by Safari?

In iOS, how does one process the select drop-down list text that is too long to be truncated by Safari?

The select drop-down list in the web page. If the text is too long, it will be automatically truncated in the iOS Safari browser and displayed as follows:

Android browsers do not have this problem.

How can I display the text in the drop-down list in the Safari browser of iOS? The answer is to use the <optgroup> </optgroup> label. For more information about the role of the optgroup tag, see w3school website description.

The html in the normal select drop-down list is as follows:

<Select id = "sel_model" class = "form-control"> <option value = ""> select a vehicle model </option> <option value = "5a38a7cae794ff021d4e9eab"> 2018 Audi a3 30th anniversary type Sportback 35 TFSI Model </option>
<Option value = "5a38a7cae794ff021d4e9eac"> 2018 Audi A3 30th Anniversary Limousine 35 TFSI Model </option>
<Option value = "5a38a7cae794ff021d4e9ead"> 2018 Audi A3 model Sportback 35 TFSI Model </option>
<Option value = "5a38a7cae794ff021d4e9family"> 2018 Audi A3 30th Anniversary Limousine 35 TFSI fashion model </option>
<Option value = "5a38a7cae794ff021d4e9eaf"> 2018 Audi A3 30th Anniversary Sportback 35 TFSI sports </option> </select>

The html after the optgroup tag is added is as follows:

<Select id = "sel_model" class = "form-control"> <optgroup> <option value = ""> select a vehicle model </option> <option value = "5a38a7cae794ff021d4e9eab"> 2018 Audi A3 30th Anniversary model Sportback 35 TFSI Model </option> <option value = "5a38a7cae794ff021d4e9eac"> 2018 Audi A3 30th Anniversary model Limousine 35 TFSI Model </option> <option value = "inherit"> 2018 Audi A3 30th Anniversary model Sportback 35 TFSI fashion model </option> <option value = "5a38a7cae794ff021d4e9department"> 2018 Audi A3 30th Anniversary Model limousine 35 TFSI fashion model </option> <option value = "5a38a7cae794ff021d4e9eaf"> 2018 Audi A3 30th Anniversary Sportback 35 TFSI sports </option> </optgroup> </select>

Then the Safari browser of iOS displays the following results:

IOS will automatically scale down the font according to the content length in the select drop-down list to ensure that all content can be displayed in one row. Although the optgroup tag is added to HTML, the method for obtaining the select value through JQuery is not affected. For example, you can still use $ ('# sel_model'). val () to obtain the selected value from the drop-down list.

Optgroup is a magic label!