CSS text-overflow: ellipsis; funktioniert nicht?

Question

Ich weiß nicht, warum dieses einfache CSS nicht funktioniert...

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

  Test Test Test Test Test Test

Sollte um den 4. "Test" herum abgeschnitten werden

Answer 1

text-overflow:ellipsis; funktioniert nur, wenn Folgendes zutrifft:

• Die Breite des Elements muss in px (Pixel) beschränkt sein. Die Breite in % (Prozent) funktioniert nicht.
• Das Element muss overflow:hidden und white-space:nowrap haben.

Das Problem hier ist, dass die Breite deines a-Elements nicht beschränkt ist. Du hast zwar eine Breiteneinstellung, aber da das Element auf display:inline (also auf Standard) gesetzt ist, ignoriert es das und seine Breite wird nicht eingeschränkt.

Du kannst das Problem lösen, indem du eine der folgenden Optionen wählst:

• Setze das Element auf display:inline-block oder display:block (wahrscheinlich ersteres, aber je nach Layoutanforderungen).
• Setze eines seiner Container-Elemente auf display:block und gib diesem Element eine feste width oder max-width.
• Setze das Element auf float:left oder float:right (wahrscheinlich ersteres, aber auch hier sollte beides denselben Effekt in Bezug auf die Ellipse haben).

Ich würde empfehlen, display:inline-block zu verwenden, da dies den minimalen Kollateraleffekt auf dein Layout hat; es funktioniert in Bezug auf das Layout sehr ähnlich wie display:inline, das derzeit verwendet wird. Aber fühle dich frei, auch mit den anderen Punkten zu experimentieren; Ich habe versucht, so viele Informationen wie möglich zu geben, um dir zu helfen zu verstehen, wie diese Dinge zusammenwirken; Ein großer Teil des Verständnisses von CSS besteht darin zu verstehen, wie verschiedene Stile zusammenwirken.

Hier ist ein Ausschnitt mit deinem Code, mit einem hinzugefügten display:inline-block, um zu zeigen, wie nah du dran warst.

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

  Test Test Test Test Test Test

Nützliche Referenzen:

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
• https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Answer 2

Die akzeptierte Antwort ist großartig. Sie können jedoch immer noch % Breite verwenden und text-overflow: ellipsis erreichen. Die Lösung ist einfach:

display: inline-block; /* für inline-Elemente wie span, strong, em etc */
text-overflow: ellipsis;
width: calc(80%); /* Der Trick liegt hier! */

Es scheint, dass immer wenn Sie calc verwenden, der endgültige Wert in absoluten Pixeln gerendert wird, was dazu führt, dass 80% in etwas wie 800px für einen Container mit einer Breite von 1000px konvertiert wird. Verwenden Sie daher anstelle von width: [IHRE PROZENT]% width: calc([IHRE PROZENT]%).

Answer 3

Also, wenn Sie diese Frage erreichen, weil Sie Probleme haben, die Auslassungspunkte innerhalb eines display: flex -Containers zum Laufen zu bringen, versuchen Sie, min-width: 0 zum äußersten Container hinzuzufügen, der über seinen Eltern überläuft, obwohl Sie bereits ein overflow: hidden festgelegt haben, und sehen Sie, wie das für Sie funktioniert.

Weitere Details und ein funktionierendes Beispiel dazu finden Sie auf diesem Codepen von aj-foster. Hat in meinem Fall total funktioniert.

Answer 4

Ich hatte dieses Problem und wollte eine Lösung, die leicht mit dynamischen Breiten funktionieren könnte. Die Lösung verwendet CSS Grid. So sieht der Code aus:

.parent {
  display: grid;
  grid-template-columns: auto 1fr;
}

.dynamic-width-child {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.fixed-width-child {
  white-space: nowrap;
}

    iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii asdfhlhlafh;lshd;flhsd;lhfaaaaaaaaaaaaaaaaaaaa

  Why?-Zed

Answer 5

Ich hatte das gleiche Problem und es scheint, dass keines der oben genannten Lösungen für Safari funktioniert. Für Nicht-Safari-Browser funktioniert dies einwandfrei:

display: block; /* oder inline-block je nach Bedarf */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

Für Safari funktioniert dies für mich. Beachten Sie, dass das Media-Query zur Überprüfung, ob der Browser Safari ist, sich im Laufe der Zeit ändern kann. Experimentieren Sie einfach mit dem Media-Query, wenn es bei Ihnen nicht funktioniert. Mit der line-clamp-Eigenschaft wäre es auch möglich, mehrere Zeilen im Web mit Auslassungspunkten zu haben, siehe hier.

// Media-Query nur für Safari-Browser.
@media not all and (min-resolution: 0.001dpcm) {
  @media {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    white-space: normal;
  }
}