html - poner - Puntos suspensivos para el texto de desbordamiento en cuadros desplegables

texto desbordado css

Question

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

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

select, div {
    width:100px; 
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow:ellipsis;
}

<!--works for a div-->
<div>
    A long option that gets cut off
</div>

<!--but not for a select-->
<select>
    <option>One - A long option that gets cut off</option>
    <option>Two - A long option that gets cut off</option>
</select>

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

Answer 1

HTML es muy limitado en lo que especifica para los controles de formulario. Eso deja espacio para que los fabricantes de sistemas operativos y navegadores hagan lo que consideren apropiado (como la select modal del iPhone que, cuando está abierta, 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 te molesta, puedes usar 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 las select puede ser el resultado de una supervisión de varios años que todos copiaron, y podría ser el momento de un cambio.

Answer 2

La solución más simple podría ser limitar el número de caracteres en el HTML mismo. Rails tiene un helper truncado (cadena, longitud) , y estoy seguro de que cualquiera que sea el backend que estés usando proporciona algo similar.

Debido a los problemas de navegadores cruzados 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

Puede usar esta función jQuery en lugar de más información sobre herramientas de Bootstrap

function DDLSToolTipping(ddlsArray) {
    $(ddlsArray).each(function (index, ddl) {
        DDLToolTipping(ddl)
    });
}

function DDLToolTipping(ddlID, maxLength, allowDots) {
    if (maxLength == null) { maxLength = 12 }
    if (allowDots == null) { allowDots = true }

    var selectedOption = $(ddlID).find(''option:selected'').text();

    if (selectedOption.length > maxLength) {
        $(ddlID).attr(''data-toggle'', "tooltip")
                .attr(''title'', selectedOption);

        if (allowDots) {
            $(ddlID).prev(''sup'').remove();
            $(ddlID).before(
            "<sup style=''font-size: 9.5pt;position: relative;top: -1px;left: -17px;z-index: 1000;background-color: #f7f7f7;border-radius: 229px;font-weight: bold;color: #666;''>...</sup>"
               )
        }
    }

    else if ($(ddlID).attr(''title'') != null) {
        $(ddlID).removeAttr(''data-toggle'')
                .removeAttr(''title'');
    }
}

Answer 4

Puedes usar esto:

select {
    width:100px; 
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow:ellipsis;
}
select option {
    width:100px;
    text-overflow:ellipsis;
    overflow:hidden;
}
div {
    border-style:solid; 
    width:100px; 
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow:ellipsis;
}

Answer 5

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, a la select , en el lado derecho.

Antes de:

Después:

CSS:

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

iOS ignora las propiedades de padding pero en su lugar usa las propiedades -webkit- .

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

Answer 6

Un poco simplista, pero funcionó para mí en todos los navegadores:

select { font-size: 0.9rem }

Answer 7

quirksmode tiene una buena descripción de la propiedad ''overflow de texto'', pero es posible que deba aplicar algunas propiedades adicionales como ''white-space: nowrap''

Aunque no soy 100% de cómo se comportará en un objeto seleccionado, podría valer la pena intentarlo primero:

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

Answer 8

Archivo CSS

.selectDD {
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;     
}

Archivo JS

$(document).ready(function () {
    $("#selectDropdownID").next().children().eq(0).addClass("selectDD");
});