CSS-Textüberlauf: Auslassungspunkte; funktioniert nicht?

368

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

ChristopherStrydom
quelle
1
Verwandte: Anwenden von Ellipsen auf mehrzeiligen Text
Michael Benjamin
FF only- Wenn diese filterOption angewendet wird, werden keine Auslassungspunkte gerendert. Fehler geöffnet
vsync
1
Ich schrieb einen Beitrag über das Lösen von Problemen mit text-overflow: brainlessdeveloper.com/2017/07/29/why-wont-my-text-overflow
Fausto NA
1
In meinem Fall hat das Entfernen der Anzeige: Flex aus dem Element geholfen
Eduard

Antworten:

908

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:

Spudley
quelle
12
Was ist, wenn ich die eingestellte Breite aufgrund des reaktionsschnellen Designs nicht verwenden kann?
SearchForKnowledge
5
Beachten Sie, dass die maximale Breite auch funktioniert. Dies hat mir geholfen, da ich ein Symbol hatte, das das Ende des Textes unabhängig von der Breite des Bereichs umarmen musste. (Andernfalls würde das Symbol nach rechts schweben, wenn der Text nicht die gesamte Breite des
Kevin
2
Hinweis: white-space: nowrap ist eigentlich nicht nötig. Wir können die Ellipsen auch ohne sie noch sehen. Für mehrere Zeilen text-overflowsehen Sie diese SO
gfaceless
24
Sie sind sich nicht sicher, ob dies eine kürzlich vorgenommene Änderung ist oder nicht, aber in Chrome 50 (Beta) müssen Sie die Breite nicht auf einen px-Wert festlegen - "100%" funktioniert auch. white-space: nowrapist jedoch erforderlich.
Donnerstag,
13
Sie müssen überhaupt keinen festen Wert festlegen width. Alles was Sie tun müssen, ist a einzustellen white-space: nowrap;und es funktioniert einwandfrei.
Adamj
37

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]%).

Oberster Delphin
quelle
16

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.

Herick
quelle
2
Tolle Lösung - es ist auch die einzige hier veröffentlichte Lösung, die für ein position: stickyElement in einem display: flexContainer funktioniert .
James Dinsdale
2
Ich denke, es sollte in der ausgewählten Antwort enthalten sein. Es hat mein Problem gelöst. Vielen Dank!
j0nd0n7
1
Sie, Sir, sind ein Genie.
Nathan Osman
1
Danke Mann, hat den Tag gerettet
Umbrella
7

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

Tim Vermaelen
quelle
5

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

Santhoshkumar
quelle
5

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;
}
Manoj Selvin
quelle
2

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

Demo

Bhojendra Rauniyar
quelle
Ich habe gerade nachgesehen und es wird abgeschnitten: /
SearchForKnowledge
2

Sie fügen nur eine Zeile CSS hinzu:

.app a {
   display: inline-block;
}
Sanjib Debnath
quelle
1

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>

Penny Liu
quelle
1

Muss enthalten

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

Darf NICHT enthalten

display: inline

Sollte beinhalten

position: sticky
NVRM
quelle
0

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

Shabbir Lakdawala
quelle
0

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>

T04435
quelle
0

Dies ist der Code, der Folgendes ermöglicht:

overflow: hidden;
text-overflow: ellipsis;

Überlauf: versteckt ist erforderlich

Max Alexander Hanna
quelle
0

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;
  }
}
Alextanhongpin
quelle
0

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.

Nemkin
quelle
-1

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;
Siraj Alam
quelle
Sie können dies auch durchsehen
Mani Abi Anand
Wenn die Breite angegeben werden kann, ist meine Antwort nicht falsch. Alles, was Sie gerade in meiner Antwort als Anzeigeblock hinzugefügt haben, ist, dass ich ein Snippet geschrieben habe, nicht die gesamten Codes, damit andere Dinge hinzugefügt werden können, aber nichts mit dem Problem zu tun haben !! Können Sie bitte angeben, warum meine Antwort nicht korrekt ist?
Siraj Alam
1
Die Breite muss ebenso wie die Anzeige angegeben werden. Wenn die Breite prozentual oder nicht angegeben ist und nicht auf harte Einheiten festgelegt ist, wird der Überlauf nicht eingeschränkt und funktioniert nicht. Siehe die akzeptierte Antwort.
jlesse
Die Breite wurde bereits von der Operation eingestellt. Ich gab einen Ausschnitt, um seine Codes hinzuzufügen
Siraj Alam