Des ellipses CSS avec des éléments en ligne?

J'ai adapté jQuery UI MultiSelect Widget, afin que le texte afficher toutes les étiquettes sélectionnées, mais si trop d'éléments sont sélectionnés pour l'affichage, le texte devrait être coupé et ellipsed. Je l'ai fait ainsi:

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

Les seules choses que je n'aime pas dans cette solution, c'est que j'ai dû mettre display: block à l'élément (span). Sans elle, la largeur paramètre est ignoré et le span étendu à la taille du texte.

Est-il possible d'obtenir des points de suspension à travailler avec des éléments en ligne (sans changer display à block)? Si oui, comment y parvenir?

source d'informationauteur Web Devie

  1. 11

    Il y a un display option qui fonctionne comme un mi-chemin entre inline et blockconçu exactement pour ce genre de situation...

    il est appelé

    display:inline-block;

    Utiliser ce lieu de blocket votre élément sera toujours circuler dans votre contenu comme si c'était inlinemais agir comme un block pour son contenu, ce qui signifie que vos points de suspension devrait fonctionner.

  2. 9

    Vous ne pouvez pas appliquer text-overflow à des éléments inline.

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