CSS overflow del testo: puntini di sospensione; non funziona?

Non so perché questo semplice CSS non funzioni ...

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

Dovrebbe tagliare intorno al 4 "Test"

text-overflow:ellipsis; funziona solo quando sono vere le seguenti condizioni:

• La larghezza dell'elemento deve essere limitata in px(pixel). La larghezza in %(percentuale) non funzionerà.
• L'elemento deve avere overflow:hiddene white-space:nowrapimpostare.

Il motivo per cui hai problemi qui è perché il widthtuo aelemento non è vincolato. Hai widthun'impostazione, ma poiché l'elemento è impostato display:inline(ovvero il valore predefinito) lo ignora e nient'altro ne limita la larghezza.

È possibile risolvere questo problema effettuando una delle seguenti operazioni:

• Imposta l'elemento su display:inline-blocko display:block(probabilmente il primo, ma dipende dalle tue esigenze di layout).
• Impostare uno dei suoi elementi contenitore su display:blocke assegnare a quell'elemento un valore fisso widtho max-width.
• Impostare l'elemento su float:lefto float:right(probabilmente il primo, ma di nuovo, entrambi dovrebbero avere lo stesso effetto per quanto riguarda i puntini di sospensione).

Suggerirei display:inline-block, poiché ciò avrà il minimo impatto collaterale sul layout; funziona in modo molto simile a display:inlinequello attualmente in uso per quanto riguarda il layout, ma sentiti libero di sperimentare anche con gli altri punti; Ho provato a fornire quante più informazioni possibili per aiutarti a capire come queste cose interagiscono insieme; gran parte della comprensione dei CSS riguarda la comprensione di come diversi stili lavorano insieme.

Ecco uno snippet con il tuo codice, con uno display:inline-blockaggiunto, per mostrare quanto eri vicino.

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

Riferimenti utili:

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

La risposta accettata è fantastica. Tuttavia, puoi comunque usare %larghezza e raggiungere text-overflow: ellipsis. La soluzione è semplice:

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

Sembra che ogni volta che lo usi calc, il valore finale sia reso in pixel assoluti, che di conseguenza si converte 80%in qualcosa di simile 800pxa un 1000pxcontenitore -width. Pertanto, anziché utilizzare width: [YOUR PERCENT]%, utilizzare width: calc([YOUR PERCENT]%).

Quindi, se raggiungi questa domanda perché stai riscontrando problemi nel tentativo di far funzionare i puntini di sospensione all'interno di un display: flexcontenitore, prova ad aggiungere min-width: 0al contenitore più esterno che trabocca il suo genitore anche se hai già impostato overflow: hiddensu di esso e vedi come funziona per te.

Maggiori dettagli e un esempio funzionante su questo codice di aj-foster . Totalmente fatto il trucco nel mio caso.

Assicurarsi inoltre che word-wrapsia impostato su normale per IE10 e versioni precedenti.

Gli standard indicati di seguito definiscono il comportamento di questa proprietà come dipendente dall'impostazione della proprietà "a capo automatico". Tuttavia, le impostazioni di WordWrap sono sempre efficaci in Windows Internet Explorer perché Internet Explorer non supporta la proprietà "text-wrap".

Quindi, nel mio caso, è word-wrapstato impostato su break-word (ereditato o per impostazione predefinita?) Causando il text-overflowfunzionamento in FF e Chrome, ma non in IE.

ms informazioni sulla proprietà a capo automatico

anchor, span... tag sono elementi inline per impostazione predefinita, in caso di elementi in linea widthproprietà non funziona. Quindi devi convertire il tuo elemento in uno inline-blocko in due block levelelementi

Includi le quattro righe scritte dopo le informazioni affinché le ellissi funzionino

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

Aggiungi display: block;o display: inline-block;al tuo#User_Apps_Content .DLD_App a

dimostrazione

Devi solo aggiungere una riga css:

.app a {
   display: inline-block;
}

In bootstrap 4 , puoi aggiungere una .text-truncateclasse per troncare il testo con i puntini di sospensione.

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

Deve contenere

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

NON DEVE contenere

display: inline

DOVREBBE contenere

position: sticky

Puoi anche aggiungere float: left; all'interno di questa classe #User_Apps_Content .DLD_App a

Ho dovuto fare alcune ellissi lunghe descrizioni (prendere solo una corsia) mentre ero reattivo, quindi la mia soluzione era quella di lasciare il testo a capo (invece di white-space: nowrap) e invece di larghezza fissa ho aggiunto altezza fissa:

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>

Questo è il codice che consente che:

overflow: hidden;
text-overflow: ellipsis;

overflow: nascosto è richiesto

Ho riscontrato lo stesso problema e sembra che nessuna delle soluzioni di cui sopra funzioni per Safari. Per i browser non safari, funziona perfettamente:

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

Per Safari, questo è quello che funziona per me. Tieni presente che la media query per verificare se il browser è Safari potrebbe cambiare nel tempo, quindi cerca di modificare la query multimediale se non funziona per te. Con la line-clampproprietà, sarebbe anche possibile avere più linee nel web con i puntini di sospensione, vedere qui .

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

Non posso commentare a causa della reputazione, quindi sto facendo un'altra risposta:

In questo caso dovrai anche rimuovere la display: block;proprietà generalmente suggerita dall'elemento su cui hai attivato text-overflow: ellipsis;, altrimenti verrà tagliata senza ... alla fine.

Scrivi questi nella tua regola CSS.

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