CSS-Textüberlauf: Auslassungspunkte; funktioniert nicht?

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

<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

Sollte um den 4. "Test" abschneiden

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

• Die Breite des Elements muss eingeschränkt sein px (Pixel) beschränkt sein. Die Breite in %(Prozent) funktioniert nicht.
• Das Element muss overflow:hiddenund habenwhite-space:nowrap setzen.

Der Grund, warum Sie hier Probleme haben, ist, dass das widthIhres aElements nicht eingeschränkt ist. Du hast einewidth Einstellung, aber weil das Element auf eingestellt istdisplay:inline (dh die Standardeinstellung) festgelegt ist, wird es ignoriert, und nichts anderes schränkt seine Breite ein.

Sie können dies beheben, indem Sie einen der folgenden Schritte ausführen:

• Setzen Sie das Element auf display:inline-blockoderdisplay:block (wahrscheinlich das erstere, hängt jedoch von Ihren Layoutanforderungen ab).
• Setzen Sie eines seiner Containerelemente auf display:blockund geben Sie diesem Element ein festes widthodermax-width .
• Setzen Sie das Element auf float:leftoder float:right(wahrscheinlich das erstere, aber auch hier sollte beides den gleichen Effekt haben, was die Auslassungspunkte betrifft).

Ich würde vorschlagen display:inline-block, da dies die minimale Auswirkung auf die Sicherheit Ihres Layouts hat. es funktioniert sehr ähnlich wie dasdisplay:inline , was es derzeit verwendet, was das Layout betrifft, aber Sie können auch mit den anderen Punkten experimentieren. Ich habe versucht, so viele Informationen wie möglich zu geben, damit Sie verstehen, wie diese Dinge miteinander interagieren. Ein großer Teil des Verständnisses von CSS besteht darin, zu verstehen, wie verschiedene Stile zusammenarbeiten.

Hier ist ein Ausschnitt mit Ihrem Code und einem display:inline-blockhinzugefügten, um zu zeigen, wie nahe Sie waren.

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

<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

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

Die akzeptierte Antwort ist fantastisch. Sie können jedoch weiterhin die %Breite verwenden und erreichen text-overflow: ellipsis. Die Lösung ist einfach:

display: inline-block; /* for em, a, span, etc (inline by default) */
text-overflow: ellipsis;
width: calc (80%); /* The trick is here! */

Es scheint, dass bei jeder Verwendung calcder Endwert in absoluten Pixeln gerendert wird, was sich folglich 80%in so etwas umwandelt800px für einen 1000pxContainer mit breiter Breite konvertiert wird. Daher kann anstelle der Verwendung width: [YOUR PERCENT]%, Verwendung width: calc([YOUR PERCENT]%).

Wenn Sie diese Frage erreichen, weil Sie Probleme haben, die Auslassungspunkte in einem display: flexContainer zum Laufen zu bringen , fügen Sie sie hinzumin-width: 0 , die Auslassungspunkte zum Laufen den äußersten Container hinzu, der übergeordnet ist, obwohl Sie bereits einen festgelegt haben overflow: hidden, und sehen Sie, wie dies für Sie funktioniert.

Weitere Details und ein funktionierendes Beispiel zu diesem Codepen von Aj -Foster . Hat den Trick in meinem Fall total geschafft.

Stellen Sie außerdem sicher word-wrap, dass IE10 und niedriger auf normal eingestellt sind.

Die unten genannten Standards definieren das Verhalten dieser Eigenschaft als abhängig von der Einstellung der Eigenschaft "Textumbruch". Die WordWrap-Einstellungen sind in Windows Internet Explorer jedoch immer wirksam, da Internet Explorer die Eigenschaft "Textumbruch" nicht unterstützt.

Daher wurde in meinem Fall word-wrapauf Break-Word (geerbt oder standardmäßig?) Verursachttext-overflow zu Arbeit in FF und Chrome, aber nicht im Internet Explorer.

MS-Informationen zur Zeilenumbruch-Eigenschaft

anchor, span... Tags sind standardmäßig Inline-Elemente . Bei Inline-Elementen widthfunktioniert die Eigenschaft nicht. Sie müssen Ihr Element also entweder inline-blockoder in block levelElemente konvertieren

Fügen Sie die vier Zeilen ein, die nach den Informationen geschrieben wurden, damit die Auslassungspunkte funktionieren

.app a
{
 color: #fff;
 font: bold 15px/18px Arial;
 height: 18px;
 margin: 0 5px 0 5px;
 padding: 0;
 position: relative;
 text-align: center;
 text-decoration: none;
 width: 140px;

 /* 
 Note: The Below 4 Lines are necessary for ellipsis to work.
 */

 display: block;/* Change it as per your requirement. */
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

Fügen Sie display: block;oder display: inline-block;zu Ihrem hinzu#User_Apps_Content .DLD_App a

Demo

Sie fügen nur eine Zeile CSS hinzu:

.app a {
   display: inline-block;
}

In Bootstrap 4 können Sie eine .text-truncateKlasse hinzufügen , um den Text mit einem Auslassungszeichen abzuschneiden.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 250px;">
  The quick brown fox jumps over the lazy dog.
</span>

Muss enthalten

  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;

Darf NICHT enthalten

display: inline

Sollte beinhalten

position: sticky

Sie können auch float hinzufügen: left; innerhalb dieser Klasse #User_Apps_Content .DLD_App a

Ich musste einige lange Ellipsenbeschreibungen machen (nur eine Spur nehmen), während ich reagierte, also bestand meine Lösung darin, den Text umbrechen zu lassen (anstelle von white-space: nowrap) und anstelle einer festen Breite eine feste Höhe hinzuzufügen:

span {
  display: inline-block;
  line-height: 1rem;
  height: 1rem;
  overflow: hidden;
  // OPTIONAL LINES
  width: 75%;
  background: green;
  //  white-space: normal; default
}

<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quia quod reprehenderit saepe sit. Animi deleniti distinctio dolorum iste molestias reiciendis saepe. Ea eius ex, ipsam iusto laudantium natus obcaecati quas rem repellat temporibus! A alias at, atque deserunt dignissimos dolor earum, eligendi eveniet exercitationem natus non, odit sint sit tempore voluptate. Commodi culpa ex facere id minima nihil nulla omnis praesentium quasi quia quibusdam recusandae repellat sequi ullam, voluptates. Aliquam commodi debitis delectus magnam nulla, omnis sequi sint unde voluptas voluptatum. Adipisci aliquam deserunt dolor enim facilis libero, maxime molestias, nemo neque non nostrum placeat reprehenderit, rerum ullam vel? A atque autem consectetur cum, doloremque doloribus fugiat hic id iste nemo nesciunt officia quaerat quibusdam quidem quisquam similique sit tempora vel. Accusamus aspernatur at au
</span>

Dies ist der Code, der Folgendes ermöglicht:

overflow: hidden;
text-overflow: ellipsis;

Überlauf: versteckt ist erforderlich

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

display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

Für Safari ist dies derjenige, der für mich funktioniert. Beachten Sie, dass sich die Medienabfrage zur Überprüfung, ob der Browser Safari ist, im Laufe der Zeit ändern kann. Basteln Sie also einfach an der Medienabfrage, wenn sie für Sie nicht funktioniert. Mit line-clampproperty wäre es auch möglich, mehrere Zeilen mit Auslassungspunkten im Web zu haben, siehe hier .

// Media-query for Safari-only browser.
@media not all and (min-resolution: 0.001dpcm) {
  @media {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    white-space: normal;
  }
}

https://stackoverflow.com/a/53784508/5626747

Kann aufgrund des guten Rufs keinen Kommentar abgeben, daher mache ich eine andere Antwort:

In diesem Fall müssen Sie auch die allgemein vorgeschlagene display: block;Eigenschaft aus dem Element entfernen, auf das Sie gesetzt haben text-overflow: ellipsis;, oder sie wird ohne das ... am Ende abgeschnitten.

Schreiben Sie diese in Ihre CSS-Regel.

display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;