Line break of select options that contains a very long value

Asked

Viewed 4,294 times

3

It is possible to break the line of a option very extensive?

ex: 

<select>
  <option>texto muito extensp<br/>restante do texto</option>
</select>

javascript jquery html css
  • 3

    There may even be a way, but the real solution is to put a smaller text and NEVER have line breaks on the option.

  • I’m sure that would be ideal, but you know how customers ask for a monstrous text in the option

  • 2

    With option does not exist, what you do, is use it with li, and a lot of CSS elaboration, I could even do, first see if it is an important need. Because you can reduce the font, as you can only drop open Extended by setting the width... as is done in the address autocomplete of Googlemap. There are many ways

  • Well, I’ll give you an example here: http://jsfiddle.net/ivanferrer/f6udze8q/ This is the link from documentation. And this is the link to project.

  • It is the failure of developers and project managers not to insist and educate customers and users about technology. There we are creating formatting functions at typing time full of flawed points that limit the user’s free use by the customer’s perfume. Who understands technology has to stand up to those who don’t understand.

  • Increases the size of option using css. Anyway, that’s not based on select, if it is to pass options with sizes like this why not use radio ? You as a programmer should be able to tell customers what fits best.

  • If you put your text in the title of the option does not resolve ? .

  • Thank you for all your help!

  • I agree when they say we should guide the client, but many should know that this is not always possible, I always try to pass ideas of good practices for projects, but many do not accept.

Show 4 more comments

2 answers

2


No, this cannot be done. However, you can always choose to use this solution alternative to add a title at the 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>

  • It is a good idea, except that if the value persists in bank, the title attribute of the element should be used.

0

Here’s 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>

the 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 link from documentation. And this is the link to project.

Browser other questions tagged javascript jquery html css

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