Text wrapping within the Options of select html

Question

Text wrapping within the Options of select html

Navigation

#1 by (1 votes)

0

I'm trying to break the text inside the option or simply decrease the size of the modal (dropdown) of the select, but I can not. Anyone already got it? how to proceed in this, I am stuck with system in this, because he needs this in responsive and I want everything organized.http: //href="https://i.stack.imgur.com/YtvZq.png">

html html5 css css3 html-select

asked by anonymous 18.03.2018 / 17:51

1 answer

Python - Transform range of rows into columns [closed] go (golang) error giving the command go install - unexpected directory layout

score 1 · Answer 1

To decrease the dropdown , you can use the width property in the select element.

.select1 {
  width: 50px;
}

.select2 {
  width: 100px;
}

<select class="select1">
  <option value="volvo">Lorem ipsum dolor asit met</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<select class="select2">
  <option value="volvo">Lorem ipsum dolor asit met</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Already breaking the text in the option , I do not know. However, I can recommend lowering the font of select .

.select1 {
  font-size: 5px;
}
.select2 {
  font-size: 12px;
}

<select class="select1">
  <option value="volvo">VolvoVolvoVolvoVolvoVolvoVolvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<select class="select2">
  <option value="volvo">VolvoVolvoVolvoVolvoVolvoVolvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>