web-dev-qa-db-fra.com

Ellipsis de texte CSS lors de l'utilisation de divs de largeur variable

Je me demande s'il y a un moyen d'avoir du texte dans un Ellipsis de gain div flottant lorsque le div parent et le div voisin ne laissent pas assez de place. Par exemple:

<style>
.parent-div {
    width: 100%;
    border: 1px;
    padding: 4px;
}
.text-div {
    float: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: Ellipsis;    
}
.icon-div {
    float: left;
}
</style>
<div class="parent-div">
  <div class="text-div">This is text I'd like to truncate when space doesn't permit</div>
  <div class="icon-div">X</div>
</div>

Jusqu'à présent, si je crunch la fenêtre du navigateur, le div parent s'effondrera, puis l'espace blanc dans text-div disparaîtra, mais quand il n'y a plus de place, les points de suspension ne se déclenchent jamais.

La seule chose à laquelle je peux penser est de déclencher un événement lorsque la fenêtre se redimensionne et de définir dynamiquement une nouvelle largeur fixe sur text-div, mais cela semble juste inélégant, en particulier compte tenu du remplissage et d'autres artefacts voisins que je devrais soustraire pour obtenir une largeur appropriée.

Des réflexions sur celui-ci?

Voici une démo jsFiddle: http://jsfiddle.net/Blender/kXMz7/

csshtmlcss-floatellipsis
36
Anthony

Vous pouvez utiliser la disposition flexible de CSS3 pour le faire de manière assez intuitive:

.parent-div {
    display: flex;
}

.text-div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: Ellipsis;    

    min-width: 0;
}

.icon-div {
    flex: 1;
}​

Démo: http://jsfiddle.net/Blender/kXMz7/1/

67
Blender

Mon entreprise ne prend pas encore en charge CSS3, mais j'ai pu résoudre le problème avec une autre solution. En appliquant l'attribut float uniquement à l'icône div et en le plaçant en premier dans le code HTML, l'autre div restera aligné verticalement tout en étant tronqué lorsqu'il n'y a pas assez de place.

Exemples: (icône à droite) http://jsfiddle.net/qftWN/ , (icône à gauche) http://jsfiddle.net/Nr2NN/

12
Chase Sandmann