Select options line break that contains a very large value

3

Is it possible to break the line of a very option ?

ex:

<select>
  <option>texto muito extensp<br/>restante do texto</option>
</select>
    
asked by anonymous 20.10.2015 / 21:21

2 answers

2

No, this is not possible to do. However you can always choose to use this solution to add a title to option :

<select>
    <option value="1" title="This is my lengthy explanation of what this selection really means, so since you only see &quot;This is my lengthy...&quot; on the drop down list you really know that you're opting to elect me as King of Willywarts!  Always be sure to read the fine print!">This is my lengthy...</option>
</select>
    
27.10.2015 / 01:11
0

Here is the answer to your problem:

 <section style="background-color:rgb(237.247.249);">
    <h2>Seleção com texto longo abaixo:</h2>
    <select name="select_this" id="testselectset">
        <option value="">Selecione abaixo...</option>
        <option value="01">Opção 1</option>
        <option value="02">Opção 2</option>
        <option value="03">Opção 3 - Muitos softwares de publicação e editores de páginas na internet agora usam Lorem Ipsum como texto-modelo padrão, e uma rápida busca por 'lorem ipsum' mostra vários websites ainda em sua fase de construção. </option>
        <option value="04">Opção 4</option>
        <option value="05">Opção 5 - o contrário do que se acredita, Lorem Ipsum não é simplesmente um texto randômico. Com mais de 2000 anos, suas raízes podem ser encontradas em uma obra de literatura latina clássica datada de 45 AC. Richard McClintock, um professor de latim do Hampden-Sydney College na Virginia, pesquisou uma das mais obscuras palavras em latim, consectetur, oriunda de uma passagem de Lorem Ipsum, e, procurando por entre citações da palavra na literatura clássica, descobriu a sua indubitável origem.</option>
        <option value="06">Opção 6</option>
        <option value="07">Opção 7</option>
        <option value="08">Opção 8</option>
    </select>
    </section>

JavaScript code:

$(function(){

    $("#testselectset").selectBoxIt({
        theme: "default",
        defaultText: "Selecione abaixo...",
        autoWidth: false
    });
    $("#testselectset").change(function(){
        alert("Item selecionado: "+this.value);
    });

});

The style sheet:

.selectboxit-container .selectboxit, .selectboxit-container .selectboxit-options {
  width: 200px; /* Width of the dropdown button */
  border-radius:0;
  max-height:240px;
}

.selectboxit-options .selectboxit-option .selectboxit-option-anchor {
    white-space: normal;
    min-height: 30px;
    height: auto;
}
.selectboxit-option a {
  text-indent: 0px;
}

Click here to see the example running.

This is the documentation link. And this is the project link.

    
29.10.2015 / 21:38