0

I'm working in a web page for mobile browsers. I have a select list that will show an option selected, the problem is that when the selected option has a long string, by default, is truncated, I'd like to show the full text because these are questions that the user should answer. I've been trying with css incrementing the height of the select element but the text is always truncated, and I can't find on Internet any answer for it I could find only to increment the items length but not the selected option. Thank you in advance for your help.

    <select name="select">
      <option value="value1">Value 1</option> 
      <option value="value2" selected>Very long string to show by default</option>
      <option value="value3">Value 3</option>
    </select>
Charles
  • 26
  • 4

1 Answers1

0

This basically answers your question: Line Break in HTML Select Option?. You cannot add a line-break in between a long <option since browsers don't provide this formatting option therefore the selected option will get truncated beyond the size of your mobile device.

Although here's a quick workaround that I've coded for you: jsFiddle. I've wrapped the <select> dropdown inside a <div> and given that <div> a width of 300px along with the overflow-x: scroll property. The selected option won't get truncated now and the user will be able to scroll left/right horizontally to read the complete text of the selected option.

Community
  • 1
  • 1
Fahad Hasan
  • 10,231
  • 4
  • 29
  • 36