Débordement de texte CSS: points de suspension; Ca 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"

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:

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
• https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

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

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.

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

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

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

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

démo

Vous ajoutez juste une ligne css:

.app a {
   display: inline-block;
}

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>

Doit contenir

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

NE DOIT PAS contenir

display: inline

Devrait contenir

position: sticky

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

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>

C'est le code qui permet que:

overflow: hidden;
text-overflow: ellipsis;

débordement: caché est requis

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

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.

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