points de suspension de débordement de texte sur l'une des deux plages à l'intérieur d'un wrapper

Question

J'ai un problème avec les points de suspension. Voici mon HTML :

 <div id="wrapper">
    <span id="firstText">This text should be effected by ellipsis</span>
    <span id="lastText">this text should not change size</span>
</div>

Existe-t-il un moyen de le faire avec du css pur? Voici ce que j'ai essayé :

 #firstText
{
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

#lastText
{
    white-space:nowrap;
    overflow:visible;   
}

C'est ainsi qu'il est montré :

Ce texte doit être effectué par des points de suspension ce texte devrait

Alors que c'est le résultat que je veux:

Ce texte doit être e...ce texte ne doit pas changer de taille

Answer 1

Vous pouvez donner width à votre #firstText comme ceci :

 #firstText
{
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    width:150px;
    display:inline-block;
}

Vérifiez cet exemple

http://jsfiddle.net/Qhdaz/5/

Answer 2

Vous pouvez y parvenir en changeant l'ordre de vos travées et en donnant à la première travée un flotteur à droite. De cette façon, vous n'avez pas besoin de définir de largeur sur l'un de vos éléments :

 #firstText
{ 
  font-size: 30px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#lastText
{ 
  color:red;
  font-size:30px;
  float:right;
  white-space:nowrap;
}

 <div id="wrapper">
    <span id="lastText">this text must be shown in full</span>
    <span id="firstText">This text may be cropped</span>
</div>

Answer 3

Il y a encore un petit cas non traité :

Lorsque vous avez une taille de wrapper inconnue ou dynamique et que vous souhaitez que le premier enfant prenne tout l'espace disponible, mais des points de suspension s'il est encore trop long.

Voici ma solution en utilisant les propriétés CSS flex

 #wrapper{
    display: inline-flex;
    flex-flow:row nowrap;
    max-width:100%; /* or width:100% if you want the spans to take all available space */
}
#firstText{
    flex:1;
    white-space:pre;
    overflow: hidden;
    text-overflow: ellipsis;
}
#lastText{
    white-space:nowrap;
}

Answer 4

Vous pouvez faire semblant comme ceci : changez votre span en div et changez votre CSS :

 #firstText
{
    float: left;
    width: 250px;
    height: 20px;
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

#lastText
{
    float: left;
    white-space:nowrap;
    overflow:visible;   
}