html - vertical - text overflow ellipsis




text-overflow non funziona quando si utilizza display: flex (4)

Il tuo problema qui è la mancanza di "bambini flessibili". Questi dovrebbero contenere gli stili per troncare un elemento, non il contenitore principale.

Prova a spostare le proprietà troncate in una classe separata .flex-child modo:

.flex-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Fonte e spiegazione dettagliata: https://css-tricks.com/flexbox-truncated-text/

.flex-container {
  display: flex;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: left;
}
<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
  ThisIsASampleText
</div>

Output: ThisIsASamp  
Expected: ThisIsASam...

Quando rimuovo la proprietà flex sta funzionando bene.

Vorrei sapere perché il flex influisce sui puntini di sospensione.

TIA


Nella tua configurazione stai avendo un oggetto flex contenitore contenitore anonimo che contiene il tuo testo (puoi fare riferimento alla specifica per questo). L'elemento flessibile obbedirà al vincolo di min-width , quindi non si ridurrà ma traboccerà e poiché si tratta di un blocco anonimo non è possibile applicare ad esso la min-width .

Inoltre, le proprietà di overflow devono essere applicate all'elemento flessibile e non al contenitore flessibile poiché questo contiene il testo e la proprietà di overflow non viene ereditata. In altre parole, quando si utilizza flexbox, si avranno due livelli: il contenitore flessibile e gli elementi flessibili. Devi applicare tutto sull'elemento flessibile.

Supponiamo di aggiungere un span intorno al nostro testo avremo questo:

.flex-container {
  display: flex;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: left;
}
<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
  <span>ThisIsASampleText</span>
</div>

Ora siamo in grado di scegliere come target l'elemento flessibile per aggiungere la min-width:0 e le proprietà necessarie per ottenere l'output previsto:

.flex-container {
  display: flex;
  text-align: left;
}

span {
  min-width:0;
  text-overflow: ellipsis;
  overflow: hidden;
}
<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
  <span>ThisIsASampleText</span>
</div>

Senza l'involucro aggiuntivo, non possiamo indirizzare il nostro articolo flessibile e l'applicazione delle proprietà al contenitore flessibile non farà nulla.


aggiungi sotto la proprietà nella classe css

white-space: nowrap;
word-break: break-word;





ellipsis