web-dev-qa-db-de.com

CSS-Textüberlauf: Ellipsis; 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

cssoverflowellipsiscss3
279
ChristopherStrydom

text-overflow:Ellipsis; funktioniert nur, wenn folgende Bedingungen erfüllt sind:

  • Die Breite des Elements muss auf px (Pixel) beschränkt sein. Breite in % (Prozentsatz) funktioniert nicht.
  • Für das Element müssen overflow:hidden und white-space:nowrap festgelegt sein.

Der Grund, warum Sie hier Probleme haben, ist, dass die width Ihres a-Elements nicht eingeschränkt ist. Sie haben zwar eine width-Einstellung, aber da das Element auf display:inline (d. H. Standardeinstellung) gesetzt ist, wird es ignoriert, und nichts anderes beschränkt seine Breite.

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

  • Setzen Sie das Element auf display:inline-block oder display:block (wahrscheinlich das vorherige, hängt jedoch von Ihren Layoutanforderungen ab).
  • Setzen Sie eines seiner Containerelemente auf display:block und geben Sie diesem Element eine feste width oder max-width.
  • Setzen Sie das Element auf float:left oder float:right (wahrscheinlich das erste Element, aber auch hier sollte die gleiche Wirkung für die Ellipsis auftreten).

Ich würde display:inline-block vorschlagen, da dies die minimale kolaterale Auswirkung auf Ihr Layout haben wird. es funktioniert sehr ähnlich wie der display:inline, den es derzeit verwendet, was das Layout angeht, aber Sie können auch mit den anderen Punkten experimentieren. Ich habe versucht, so viele Informationen wie möglich zu geben, um zu verstehen, wie diese Dinge zusammenwirken. Ein großer Teil des Verständnisses von CSS besteht darin, zu verstehen, wie verschiedene Stile zusammenarbeiten.

Hoffentlich hilft das.

Hier ist ein Ausschnitt mit Ihrem Code und einem hinzugefügten display:inline-block, 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 Hinweise:

722
Spudley

Stellen Sie außerdem sicher, dass Word-wrap für IE10 und darunter auf normal gesetzt ist.

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

In meinem Fall wurde Word-wrap auf break-Word (geerbt oder standardmäßig?) Gesetzt, wodurch text-overflow in FF und Chrome funktioniert, jedoch nicht im IE.

ms info über die Word-wrap-Eigenschaft

7
Tim Vermaelen

Die akzeptierte Antwort ist großartig. Sie können jedoch weiterhin % width verwenden und text-overflow: Ellipsis erreichen. Die Lösung ist einfach:

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

Wenn Sie calc verwenden, wird der endgültige Wert anscheinend in absoluten Pixeln wiedergegeben, wodurch 80% - 0px in etwas wie 800px für einen 1000px- width-Container umgewandelt wird. Verwenden Sie daher nicht width: [YOUR PERCENT]%, sondern width: calc([YOUR PERCENT]% - 0px).

7
Trouble Zero

anchor, span... Tags sindInline-Elementestandardmäßig. Bei Inline-Elementen funktioniert die width-Eigenschaft nicht. Sie müssen also Ihr Element in inline-block- oder block level-Elemente konvertieren

5
santhoshkumar

Fügen Sie die vier Zeilen ein, die nach den Informationen geschrieben wurden, damit Ellipsis funktioniert

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

        /* 
           **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;

    }
3
Manoj Selvin

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

Demo

2
Bhojendra Rauniyar

Sie fügen nur eine Zeile hinzu: css:

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

Wenn Sie also zu dieser Frage gelangen, weil Sie Probleme haben, die Ellipsis in einem display: flex-Container zum Laufen zu bringen, fügen Sie min-width: 0 zum äußersten Container hinzu, der übergeordnet ist, obwohl Sie bereits einen overflow: hidden gesetzt haben, und sehen Sie, wie das für Sie funktioniert .

Weitere Details und ein Arbeitsbeispiel zu diesem codepen by aj-foster . Total hat der Trick in meinem Fall.

1
Herick

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

0
Shabbir Lakdawala

Ich musste einige lange Beschreibungen mit einer Ellipse machen (nur eine Spur nehmen), während ich ansprechbar war. Daher bestand die Lösung darin, den Text umbrechen zu lassen (anstelle von white-space: nowrap).

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>

0
T04435

In bootstrap 4 können Sie eine .text-truncate-Klasse hinzufügen, um den Text mit einer Ellipse 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>

0
Yi-Ting Liu

Muss enthalten

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

DARF NICHT enthalten

display: inline

Sollte beinhalten

position: sticky
0
Cryptopat