Text break within select html Options

Asked

Viewed 514 times

0

I’m trying to break the text into the option or simply decrease the size of the modal (dropdown) of the select, but I can’t. Has anyone made it? how to proceed in this, I’m stuck with system in this, because it needs this in responsive and I want everything organized.inserir a descrição da imagem aqui

html css html5 css3 html-select
  • 1

    post your relevant HTML/CSS code

1 answer

1

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

.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 break the text on option, i do not know. However, I can recommend that you decrease the source 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>

Browser other questions tagged html css html5 css3 html-select

You are not signed in. Login or sign up in order to post.