web-dev-qa-db-fra.com

Débordement de texte CSS: Ellipsis; ne fonctionne pas?

Je ne sais pas pourquoi ce simple CSS ne fonctionne pas ...

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

Devrait couper autour du 4ème "Test"

cssoverflowellipsiscss3
279
ChristopherStrydom

text-overflow:Ellipsis; ne fonctionne que lorsque les conditions suivantes sont vraies:

  • La largeur de l'élément doit être contrainte dans px (pixels). La largeur en % (pourcentage) ne fonctionnera pas.
  • L'élément doit avoir overflow:hidden et white-space:nowrap définis.

La raison pour laquelle vous rencontrez des problèmes ici est que la width de votre élément a n'est pas contrainte. Vous avez un paramètre width, mais comme l'élément est défini sur display:inline (c'est-à-dire le paramètre par défaut), il l'ignore et rien d'autre ne limite sa largeur.

Vous pouvez résoudre ce problème en effectuant l’une des opérations suivantes:

  • Définissez l'élément sur display:inline-block ou display:block (probablement l'ancien, mais cela dépend des besoins de votre mise en page).
  • Définissez l'un de ses éléments conteneurs sur display:block et attribuez à cet élément une valeur fixe width ou max-width.
  • Définissez l'élément sur float:left ou float:right (probablement l'ancien, mais là encore, l'un ou l'autre devrait avoir le même effet en ce qui concerne Ellipsis).

Je suggérerais display:inline-block, car cela aura un impact latéral minimal sur votre mise en page; cela fonctionne très bien comme le display:inline qu'il utilise actuellement en ce qui concerne la disposition, mais n'hésitez pas à expérimenter également les autres points; J'ai essayé de donner autant d'informations que possible pour vous aider à comprendre comment ces éléments interagissent ensemble; Une grande partie de la compréhension de CSS concerne la compréhension de la manière dont les différents styles fonctionnent ensemble.

J'espère que cela pourra aider.

Voici un extrait avec votre code, avec un display:inline-block ajouté, pour montrer votre proximité.

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

Références utiles:

722
Spudley

Assurez-vous également que Word-wrap est défini sur normal pour IE10 et inférieur.

Les normes référencées ci-dessous définissent le comportement de cette propriété comme dépendant du paramétrage de la propriété "text-wrap". Toutefois, les paramètres wordWrap sont toujours effectifs dans Windows Internet Explorer, car Internet Explorer ne prend pas en charge la propriété "text-wrap".

Ainsi, dans mon cas, Word-wrap a été défini sur break-Word (hérité ou par défaut?), Ce qui a permis à text-overflow de fonctionner dans FF et Chrome, mais pas dans IE.

info ms sur la propriété Word-wrap

7
Tim Vermaelen

La réponse acceptée est géniale. Cependant, vous pouvez toujours utiliser % width et atteindre text-overflow: Ellipsis. La solution est simple:

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

Il semble que lorsque vous utilisez calc, la valeur finale est rendue en pixels absolus, ce qui convertit conséquemment 80% - 0px en quelque chose comme 800px pour un conteneur 1000px-width. Par conséquent, au lieu d'utiliser width: [YOUR PERCENT]%, utilisez width: calc([YOUR PERCENT]% - 0px).

7
Trouble Zero

Les variables anchor, span... sont éléments en ligne par défaut, la propriété width ne fonctionne pas dans le cas d'éléments en ligne. Vous devez donc convertir votre élément en éléments inline-block ou block level

5
santhoshkumar

Incluez les quatre lignes écrites après les informations pour que Ellipsis fonctionne

.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

Ajoutez display: block; ou display: inline-block; à votre #User_Apps_Content .DLD_App a

démo

2
Bhojendra Rauniyar

Vous venez d'ajouter une ligne css:

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

Donc, si vous atteignez cette question parce que vous ne parvenez pas à obtenir les ellipsis dans un conteneur display: flex, essayez d'ajouter min-width: 0 au conteneur le plus à l'extérieur qui déborde de son parent, même si vous avez déjà défini un overflow: hidden et voir comment cela fonctionne pour vous .

Plus de détails et un exemple de travail sur ceci codepen by aj-Foster . Totalement fait le tour dans mon cas.

1
Herick

Vous pouvez également ajouter float: left; à l'intérieur de cette classe #User_Apps_Content .DLD_App a

0
Shabbir Lakdawala

Je devais faire de longues descriptions ellipse (ne prendre qu'une seule piste) tout en étant réactif; ma solution était donc de laisser le texte envelopper (au lieu de white-space: nowrap) et au lieu d'une largeur fixe, j'ai ajouté une hauteur fixe:

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

Dans bootstrap 4, vous pouvez ajouter une classe .text-truncate pour tronquer le texte avec un Ellipsis.

<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

Doit contenir

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

NE DOIT PAS contenir

display: inline

Devrait contenir

position: sticky
0
Cryptopat