Textüberlauf-Ellipse auf einer von zwei Spannen innerhalb eines Wrappers

Ich habe ein Problem mit Ellipsen. Hier ist mein 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>

Gibt es eine Möglichkeit, dies mit reinem CSS zu tun? Folgendes habe ich versucht:

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

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

So wird es dargestellt:

Dieser Text sollte durch Auslassungspunkte erfolgen. Dieser Text sollte

Während dies das Ergebnis ist, das ich will:

Dieser Text sollte e…dieser Text sollte seine Größe nicht ändern

Du kannst Geben width zu deinem #firstText so was :

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

Überprüfen Sie dieses Beispiel

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

Sie könnten dies erreichen, indem Sie die Reihenfolge Ihrer Spannen ändern und der ersten Spanne ein Float-Recht geben. Auf diese Weise müssen Sie für keines Ihrer Elemente eine Breite festlegen:

#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>

Es gibt noch einen kleinen Fall, der nicht bearbeitet wurde:

Wenn Sie eine unbekannte oder dynamische Wrapper-Größe haben und möchten, dass das erste untergeordnete Element den gesamten verfügbaren Platz einnimmt, aber Auslassungspunkte, wenn es immer noch zu lang ist.

Hier ist meine Lösung mit flex CSS-Eigenschaften:

#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;
}

<div id="wrapper">
  <span id="firstText">This text should be effected by ellipsis if wrapper is too small</span>
  <span id="lastText">This text should be fixed and not change size</span>
</div>

Du könntest es so vortäuschen: Ändere deine span zu div und ändere dein CSS:

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

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