Débordement de texte CSS: points de suspension; Ca ne fonctionne pas?

368

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"

ChristopherStrydom
la source
1
en relation: Application d'ellipsis au texte multiligne
Michael Benjamin
FF only- si elle filterest appliquée, les points de suspension ne seront pas rendus. bug ouvert
vsync
1
J'ai écrit un article sur la résolution des problèmes avec text-overflow: brainlessdeveloper.com/2017/07/29/why-wont-my-text-overflow
Fausto NA
1
dans mon cas, la suppression de l'affichage: le flex de l'élément a aidé
Eduard

Réponses:

909

text-overflow:ellipsis; ne fonctionne que lorsque les conditions suivantes sont remplies:

  • La largeur de l'élément doit être contrainte en px(pixels). La largeur en %(pourcentage) ne fonctionnera pas.
  • L'élément doit avoir overflow:hiddenet white-space:nowrapdéfini.

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

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

  • Définissez l'élément sur display:inline-blockoudisplay:block (probablement le premier, mais cela dépend de vos besoins de mise en page).
  • Définissez l'un de ses éléments de conteneur sur display:blocket donnez à cet élément une valeur fixe widthoumax-width .
  • Réglez l'élément sur float:leftou float:right(probablement le premier, mais encore une fois, l'un ou l'autre devrait avoir le même effet en ce qui concerne les points de suspension).

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

Voici un extrait avec votre code, avec un display:inline-blockajout, pour montrer à quel point vous étiez proche.

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

Spudley
la source
12
Que faire si je ne peux pas utiliser la largeur définie en raison d'une conception réactive?
SearchForKnowledge
5
Notez que max-width fonctionne également. Cela m'a aidé car j'avais une icône qui devait étreindre la fin du texte quelle que soit la largeur de sa portée. (Sinon, l'icône flotterait vers la droite si le texte n'occupait pas toute la largeur de la plage)
Kevin
2
Remarque: white-space: nowrapn'est en fait pas nécessaire. Nous pouvons encore voir les ellipses même sans elle. Pour plusieurs lignes text-overflow, voir ce SO
gfaceless
24
Je ne sais pas s'il s'agit d'une modification récente ou non, mais dans Chrome 50 (version bêta), vous n'avez pas à définir la largeur sur une valeur px - "100%" fonctionne également. white-space: nowrapest cependant requis.
thdoan
13
Vous n'avez pas du tout besoin de définir un fixe width. Il vous suffit de définir un white-space: nowrap;et cela fonctionne très bien.
adamj
37

La réponse acceptée est impressionnante. Cependant, vous pouvez toujours utiliser la %largeur 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%); /* The trick is here! */

Il semble que chaque fois que vous utilisez calc, la valeur finale est rendue en pixels absolus, qui se convertit par conséquent 80%en quelque chose comme 800pxpour un 1000pxconteneur de largeur. Par conséquent, au lieu d'utiliser width: [YOUR PERCENT]%, utilisez width: calc([YOUR PERCENT]%).

Dauphin suprême
la source
17

Donc, si vous atteignez cette question parce que vous avez du mal à faire fonctionner les points de suspension à l'intérieur d'un display: flexconteneur, essayez d'ajouter min-width: 0au conteneur le plus à l'extérieur qui déborde de son parent même si vous avez déjà défini unoverflow: hidden et voyez comment cela fonctionne pour vous.

Plus de détails et un exemple de travail sur ce codepen par aj-favoriser . J'ai complètement fait l'affaire dans mon cas.

Herick
la source
2
Excellente solution - c'est aussi la seule publiée ici qui fonctionne pour un position: stickyélément dans un display: flexconteneur.
James Dinsdale
2
Je pense que cela devrait être inclus dans la réponse choisie. Cela a résolu mon problème. Merci!
j0nd0n7
1
Vous, monsieur, êtes un génie.
Nathan Osman
1
merci l'homme, a sauvé la journée
Umbrella
7

Assurez word-wrap- vous également qu'il est réglé sur normal pour IE10 et inférieur.

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

Par conséquent , dans mon cas, word-wrapa été mis à break-word (hérité ou par défaut?), Ce qui a fait text-overflowfonctionner FF et Chrome, mais pas IE.

ms info sur la propriété word-wrap

Tim Vermaelen
la source
5

anchor, span... les balises sont des éléments en ligne par défaut. En cas d'éléments en ligne, la widthpropriété ne fonctionne pas. Vous devez donc convertir votre élément en éléments inline-blockoublock level

santhoshkumar
la source
5

Inclure les quatre lignes écrites après les informations pour que les points de suspension fonctionnent

.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
la source
2

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

démo

Bhojendra Rauniyar
la source
Je viens de vérifier et ça coupe: /
SearchForKnowledge
2

Vous ajoutez juste une ligne css:

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

Dans bootstrap 4 , vous pouvez ajouter une.text-truncateclasse pour tronquer le texte avec des points de suspension.

<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
la source
1

Doit contenir

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

NE DOIT PAS contenir

display: inline

Devrait contenir

position: sticky
NVRM
la source
0

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

Shabbir Lakdawala
la source
0

J'ai dû faire de longues descriptions ellipse (ne prendre qu'une seule voie) tout en étant réactif, donc ma solution était de laisser le texte envelopper (au lieu de white-space: nowrap) et au lieu de 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>

T04435
la source
0

C'est le code qui permet que:

overflow: hidden;
text-overflow: ellipsis;

débordement: caché est requis

Max Alexander Hanna
la source
0

J'ai rencontré le même problème et il semble qu'aucune des solutions ci-dessus ne fonctionne pour Safari. Pour un navigateur non safari, cela fonctionne très bien:

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

Pour Safari, c'est celui qui fonctionne pour moi. Notez que la requête multimédia pour vérifier si le navigateur est Safari peut changer au fil du temps, il vous suffit donc de bricoler la requête multimédia si cela ne fonctionne pas pour vous. Avec la line-clamppropriété, il serait également possible d'avoir plusieurs lignes sur le web avec des points de suspension, voir ici .

// 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
la source
0

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

Je ne peux pas commenter en raison de la réputation, donc je fais une autre réponse:

Dans ce cas, vous devrez également supprimer la display: block;propriété généralement suggérée de l'élément que vous avez activé text-overflow: ellipsis;, ou elle sera coupée sans le ... à la fin.

nemkin
la source
-1

Écrivez-les dans votre règle css.

display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
Siraj Alam
la source
Vous pouvez également consulter ceci, jsfiddle.net/ManiAnand/5v6pfy9w
Mani Abi Anand
Si la largeur peut être spécifiée, ma réponse n'est pas fausse. Tout ce que vous venez d'ajouter un bloc d'affichage dans ma réponse, j'ai écrit un extrait, pas tous les codes, donc d'autres choses peuvent être ajoutées mais n'ont rien à voir avec le problème !! Pouvez-vous préciser en quoi ma réponse n'est pas correcte?
Siraj Alam
1
La largeur doit être spécifiée ainsi que l'affichage. Si la largeur est un pourcentage ou non spécifié et non définie sur des unités dures, le débordement ne sera pas contraint et cela ne fonctionnera pas. Voir la réponse acceptée.
jlesse
La largeur a déjà été définie par l'op. J'ai donné un extrait pour ajouter ses codes
Siraj Alam