Pregunta Puntos suspensivos CSS con elementos en línea?


He adaptado el widget de jQuery UI MultiSelect para que el texto muestre todas las etiquetas seleccionadas, pero si se seleccionan demasiados elementos para mostrar, el texto se recortará y elípticamente. Lo hice así:

.ui-multiselect .selected-text {
    display: block;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Lo único que no me gusta en esa solución es que tuve que establecer display: block al elemento (lapso). Sin él, el parámetro ancho se ignoró y el lapso se expandió al tamaño del texto.

¿Es posible obtener puntos suspensivos para trabajar con elementos en línea (sin cambiar display a block)? Si es así, ¿cómo lograr eso?


11
2017-07-24 15:19


origen


Respuestas:


Hay un display opción que funciona como una casa intermedia entre inline y block, diseñado para exactamente este tipo de situación ...

se llama

display:inline-block;

Use esto en lugar de block, y tu elemento seguirá fluyendo en tu contenido como si fuera inline, pero actuará como un block por su contenido, lo que significa que sus puntos suspensivos deberían funcionar.


11
2017-07-24 15:33



No puedes aplicar text-overflow para alinear elementos.

http://dev.w3.org/csswg/css-ui/#text-overflow


9
2017-07-24 15:22