Textüberlauf-Auslassungspunkte in einem von zwei Bereichen in einem Wrapper

71

Ich habe ein Problem mit Auslassungspunkten. 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 gezeigt:

Dieser Text sollte durch Auslassungspunkte dieses Textes erfolgen

Dies ist zwar das Ergebnis, das ich möchte:

Dieser Text sollte e ... sein Text sollte die Größe nicht ändern

html css Funkyfly
quelle

Antworten:

119

Sie können widthIhren folgenden geben #firstText:

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

Überprüfen Sie dieses Beispiel

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

Sandeep
quelle
3
Arbeitete besser für mich mit maximaler Breite anstelle von Breite.
mUser1990
2
Wie lösen Sie das Problem mit der vertikalen Ausrichtung? Eine Spanne erscheint niedriger als die andere.
Jeremy
1
@Jeremy: entferne entweder den "display: inline-block" auf #firstText oder füge "display: inline-block" auch zu #lastText hinzu. Am Ende haben beide <span> entweder einen Inline-Block oder NICHT. Die richtige Lösung hängt möglicherweise von Ihrem Markup ab.
Ripper17
@ ripper17, das funktioniert nicht. In der jsfiddle sind sowohl #firstText als auch #lastText Inline-Block und dennoch nicht vertikal ausgerichtet. Das Entfernen beider Inline-Blöcke behebt das Problem ebenfalls nicht.
Frikster
1
@Jeremy: füge einfach vertikal aus: Mitte; in #firstText. Update Geige: jsfiddle.net/68xgrqvm
Harshad Vekariya
11

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

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

#lastText
{
    float:right;
    white-space:nowrap;
}
<div id="wrapper">
    <span id="lastText">this text should not change size</span>
    <span id="firstText">This text should be effected by ellipsis</span>
</div>
Erweitern Sie das Snippet

Michiel
quelle
1
Fantastischer Ansatz, wenn Sie keine Breite angeben können. display: block;scheint den Unterschied zu machen.
Weltschmerz
10

Es gibt noch einen kleinen Fall, der nicht behandelt wird:

Wenn Sie eine unbekannte oder dynamische Wrappergröße haben und möchten, dass das erste Kind den gesamten verfügbaren Speicherplatz außer den Auslassungspunkten belegt, wenn dieser noch zu lang ist.

Hier ist meine Lösung mit flexCSS-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;
}
Freezystem
quelle
1
Ich habe dies nicht zum Laufen gebracht (getestet in IE 11). Entweder max-widthsollte das einfach sein widthoder das inline-flexsollte einfach sein flex.
Alex311
1

Sie könnten es so vortäuschen: Ändern Sie Ihr spanzu divund ändern Sie Ihr CSS:

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

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