Tamanho das options de um select

[borges.com 0]

Pessoal Bom dia,

Tenho o seguinte problema.
um dos selects que monto em meu sistema tem um texto da Option muito grande(recebo esse texto do banco), se o texto é muito grande quando abro as options elas são maiores que o tamanho do select e por vezes saem da tela.
Existe alguma forma com jquery css ou algo que o tamanho das options se ajuste ao tamanho do select?

[Maujor 144]

Veja se esse script resolve o problema: http://jsbin.com/buyugojo/1/edit?html,js,output

[androidel 7]

Olá borges.com,

 

Você também pode utilizar 2 propriedades do CSS para quebrar o texto.

word-wrap
word-break

[Maujor 144]

 

Você também pode utilizar 2 propriedades do CSS para quebrar o texto.

@androidel

As propriedades que você sugeriu tem funções diferentes.

Você poderia criar um exemplo utilizando essas propriedades para resolver o problema proposto pelo @borges.com?

Use o jsbin ou fiddle para o seu exemplo.

[androidel 7]

@Maujor

 

Ok, tudo bem. :) Mas não é necessário o jsbin ou o fiddle, como citado.

 

http://www.w3schools.com/cssref/css3_pr_word-wrap.asp

http://www.w3schools.com/cssref/css3_pr_word-break.asp

 

@borges.com

 

A propriedade word-wrap serve para que, caso a largura tenha um valor máximo definido e o texto ultrapasse, as palavras terão como se fosse uma quebra de linha, só que na verdade é a continuação. Exemplo:

 

"Quando se fala em vício logo pensamos em drogas, cigarro, álcool, jogatina, entre outros. Porém, o vício está ligado a uma questão mais ampla, ou seja, não se restringe a um ou dois aspectos, mas sim a diversos. Há o vício em internet que também é conhecido como compulsão à internet ou internet-dependência."

 

Se houvesse uma largura máxima, ocasionaria na seguinte forma:

 

"Quando se fala em vício logo pensamos em drogas,

cigarro, álcool, jogatina, entre outros. Porém, o vício

está ligado a uma questão mais ampla, ou seja, não

se restringe a um ou dois aspectos, mas sim a

diversos. Há o vício em internet que também é

conhecido como compulsão à internet ou internet-

dependência."

 

Compreende?

 

No caso da propriedade word-break haverá o mesmo efeito da propriedade anterior, porém ela não quebrará apenas as palavras, e sim as letras. Exemplo do texto anterior:

 

Sem word-break:

 

"Quando se fala em vício logo pensamos em drogas, cigarro, álcool, jogatina, entre outros. Porém, o vício está ligado a uma questão mais ampla, ou seja, não se restringe a um ou dois aspectos, mas sim a diversos. Há o vício em internet que também é conhecido como compulsão à internet ou internet-dependência."

 

Com word-break com largura máxima:

 

"Quando se fala em vício logo pensamos em dro

gas, cigarro, álcool, jogatina, entre outros. Porém

, o vício está ligado a uma questão mais ampla, o

u seja, não se restringe a um ou dois aspectos, m

as sim a diversos. Há o vício em internet que tam

bém é conhecido como compulsão à internet ou i

nternet-dependência."

 

Compreende?

 

Lembrando que essa propriedade possui 2 tipos de VALORES, que são:

work-break: break-all;
word-break: keep-all;

Qual a diferença entre elas?

 

break-all

 

Fará com que, ao chegar ao máximo de largura definida, ela quebre as palavras em letras, ou até mesmo deixará fixa as palavras (sem dividir), a depender da situação. Exemplo (retirado da w3schools):

 

Sem break-all:

 

"This paragraph contains some text. This line will-break-at-hyphenates."

 

Com break-all com largura máxima definida:

 

"This paragraph contain

s some text. This line wi

ll-break-at-hyphenates."

 

Compreende?

 

keep-all

 

Possui a mesma situação da propriedade break-all, por outro lado, se as palavras não tiverem espaçamento, ele passará do limite da largura que definimos. Exemplo (retirado da w3schools):

 

Sem keep-all com largura máxima definida:

 

"This paragraph contains

some text. This line

will-break-at-hyphenates."

 

Com keep-all com largura máxima definida:

 

"This paragraph contains

some text. This line will-break-at-hyphenates."

 

Compreende?

 

Espero ter ajudado ( '-' )

PS: Desculpe a demora para responder, estudo de manhã e de tarde.

PSS: Deu trabalho pra caramba ( .-. ), minha maior resposta. hehe ( ^-^ )

[Maujor 144]

Com uso de CSS, não é possível quebrar linhas ou palavras em textos inseridos no elemento option de um select.
Use JavaScript conforme o código que postei no Fidlle.

[androidel 7]

Com uso de CSS, não é possível quebrar linhas ou palavras em textos inseridos no elemento option de um select.

Use JavaScript conforme o código que postei no Fidlle.

 

Olá Maujor,

 

OK. Entendi. ( '-' ). Mas se possível, esse aqui é bem interessante de se utilizar.

 

http://stackoverflow.com/questions/18578388/html-dropdown-select-with-text-wrap-and-border-after-every-value-option