quebrar texto dentro do option

[Biel. 9]

Olá pessoal. Como quebrar texto dentro do option com javascript ou css

<div style="width:200px; height:300px; border:2px solid blue;">
    <h2>quebrar texto dentro do option value</h2>
    <select name="select_this" id="testselectset" style="width:100%; ">
        <option value="">Selecione abaixo...</option>
        <option value="01">Opção 1</option>
        <option value="02">Opção 2</option>
        <option value="03">este texto é muito extenso e deve ser quebrado</option>
        <option value="04">Opção 4</option>
    </select>
</div>

<!-- <h1 style="word-wrap: break-word; width:300px">asPalavrasEstaojuntasMasDarParaquebrarComWordWrap</h1> -->

 

[wanderval 19]

Bom Biel é um pouco difícil você mudar o comportamento dos componentes nativos, tanto que o Bootstrap usa um dropdown customizado. A melhor maneira realmente e customizando um.

Ex:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here Something else here Something else here Something else here Something else here Something else here Something else here</a>
  </div>
</div>

JsBin: https://jsbin.com/haqejeqefe/edit?html,css,output

[Omar~ 87]

Só completando o que o @wanderval mencionou, não é pouco difícil e sim muito.

Os recursos de estilização para certos componentes são mínimos, mas assim como ele disse podemos criar elementos que simulam o desejado.

Um problema do exemplo apresentado pelo colega é que não há como capturar a opção que o usuário selecionou.

Então podemos criar uma tag label vinculado a um input "checkbox" e esse label estará no lugar das tag's <a>. Apresentando uma caixa de seleção mas na verdade é outra coisa ao qual podemos obter o selecionado no servidor quando selecionado algum.

 

Complemento pessoal:

Quando eu estava criando esse script https://github.com/Spell-Master/sm-web/tree/master/javascript/SelectOption (que é outro recurso que simula uma caixa de seleção) a princípio estava criando algo que pudesse estilizar livremente cada option interno. No entanto cheguei a conclusão que isso não era correto, se um texto extrapola as limitações é conclusivo que o elemento necessário para tal finalidade não é um <select>