Puntos suspensivos para el texto de desbordamiento en los cuadros desplegables

Question

Estoy arreglando el ancho de uno de mis cuadros desplegables (sí, sé que hay problemas entre navegadores al hacer esto).

¿Existe alguna manera de no cortar el texto desbordado y anexar elipsis? Desbordamiento de texto: los puntos suspensivos no funcionan para los elementos <select> (al menos en Chrome).

Ejemplo aquí: http://jsfiddle.net/t5eUe/

Answer 1

HTML es muy limitado en lo que se especifica para los controles de formulario. Eso deja espacio para que los fabricantes de navegadores y sistemas operativos hagan lo que consideren apropiado (como el modal del iPhone select que, cuando está abierto, se ve totalmente diferente del menú emergente tradicional).

Parece que la mayoría de los sistemas operativos cortan la opción seleccionada sin una elipsis. Si pudieras cambiar la forma en que se corta el texto, parecería extraño, ya que no es así como funcionan los cuadros de selección en el resto del sistema operativo.

Si le molesta, puede utilizar un reemplazo personalizable, como Chosen, que se ve distinto del select nativo.

O bien, presente un error en un sistema operativo o navegador importante. Por lo que sabemos, la forma en que se corta el texto en select s puede ser el resultado de una supervisión de varios años que todos copiaron, y podría ser momento de un cambio.

Answer 2

La solución más simple podría ser la de limitar el número de caracteres en el propio HTML. Rails tiene un helper truncate(string, length), y estoy seguro de que cualquiera que sea el back-end que esté utilizando proporciona algo similar.

Debido a los problemas de varios navegadores que ya conoce con respecto al ancho de los cuadros de selección, me parece que es la opción más directa y menos propensa a errores.

<select> 
    <option value="1">One</option> 
    <option value="100">One hund...</option> 
<select> 

Answer 3

quirksmode tiene una buena descripción de la propiedad 'text-overflow', pero puede necesitar aplicar algunas propiedades adicionales como 'white-space: nowrap'

Mientras que no estoy 100% cómo este se comportará de un objeto de selección, podría ser vale la pena probar esta primera:

http://www.quirksmode.org/css/textoverflow.html

Answer 4

Si encuentra esta pregunta porque tiene una flecha personalizada en su cuadro de selección y el texto va sobre su flecha, encontré una solución que funciona en algunos navegadores. Simplemente agregue algo de relleno, al select, en el lado derecho.

Antes:

Después:

CSS:

select { 
    padding:0 30px 0 10px !important; 
    -webkit-padding-end: 30px !important; 
    -webkit-padding-start: 10px !important; 
} 

iOS hace caso omiso de las propiedades padding pero utiliza el -webkit- propiedades en su lugar.

http://jsfiddle.net/T7ST2/4/