I puntini di sospensione del testo non vengono visualizzati nell'articolo della Flexbox

Question

Ho testato text-overflow: ellipsis su chrome e firefox ed entrambi hanno abbreviato il testo, ma non mostra il '...' alla fine. Cosa c'è che non va?

Ho provato ad utilizzare altre soluzioni che ho trovato qui come min-width, max-width, flex: 0 1 auto, ecc. Ma nessuno di loro sembra funzionare. I puntini di sospensione non vengono visualizzati.

Questo è il mio codice:

ul { 
    display: flex; 
    height: 40px; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    list-style: none; 
} 
ul li { 
    display: flex; 
    align-items: center; 
    height: 100%; 
    padding: 0 4px; 
    border-bottom: 1px solid #eee; 
} 
ul li:first-child { 
    width: 55px; 
    flex-shrink: 0; 
} 
ul li:first-child input { 
    width: 100%; 
} 
ul li:last-child { 
    width: 48px; 
    flex-shrink: 0; 
} 
ul li:nth-child(2) { 
    flex: 0 1 auto; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    min-width: 0px; 
} 
ul li:nth-child(3) { 
    width: 75px; 
    flex-shrink: 0; 
} 

Ecco un violino per dimostrare il problema: https://jsfiddle.net/dpbejpou/1/

Nota: Ho già provato ad utilizzare altri soluzioni, come ho detto, come ad esempio min-width , larghezza massima (che puoi vedere già nel mio codice) ha trovato on this link ma il codice stil non funziona.

Answer 1

Per il lavoro text-overflow: ellipsis, è necessario definire una larghezza. Hai flex-basis: auto, che non è abbastanza.

Inoltre, text-overflow: ellipsis funziona solo su elementi a livello di blocco.

Un articolo flessibile è considerato blockified e i puntini di sospensione funzioneranno. Tuttavia, si applica anche display: flex agli elementi flessibili, che interrompe la regola a livello di blocco per la proprietà display.

provare queste regolazioni:

ul { 
 
    display: flex; 
 
    height: 40px; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    list-style: none; 
 
} 
 
ul li { 
 
    /* display: flex;   <-- remove */ 
 
    /* align-items: center;  <-- will no longer work */ 
 
    height: 100%; 
 
    padding: 0 4px; 
 
    border-bottom: 1px solid #eee; 
 
} 
 
ul li:first-child { 
 
    width: 55px; 
 
    flex-shrink: 0; 
 
} 
 
ul li:first-child input { 
 
    width: 100%; 
 
} 
 
ul li:last-child { 
 
    width: 48px; 
 
    flex-shrink: 0; 
 
} 
 
ul li:nth-child(2) { 
 
    flex: 0 1 100px;    /* adjusted; 100px for demo only */ 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    min-width: 0px; 
 
} 
 
ul li:nth-child(3) { 
 
    width: 75px; 
 
    flex-shrink: 0; 
 
}

<ul> 
 
    <li><input type="number" value="1"></li> 
 
    <li>A very long text description goes here</li> 
 
    <li>$99.90</li> 
 
    <li>Del</li> 
 
</ul>

Revised Fiddle

Per centrare verticalmente il testo, è possibile utilizzare il layout Flex sugli elementi non puntini di sospensione, come si aveva prima. Per centrare verticalmente il testo dei puntini di sospensione, try another method.

Riferimenti:

• Applying an ellipsis to multiline text
• How do I vertically center text with CSS?

Answer 2

provare questo Fiddle

Un arco aggiunto al markup:

<ul> 
    <li><input type="number" value="1"></li> 
    <li><span>A very long text description goes here</span></li> 
    <li>$99.90</li> 
    <li>Del</li> 
</ul> 

E proprio questo css:

ul li:nth-child(2) span { 
    max-width: 135px; //change it to any max value you like 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

Answer 3

Hai solo bisogno di rimuovere la visualizzazione di proprietà di flex li. Si prega di controllare la demo.

ul li { 
    align-items: center; 
    height: 100%; 
    padding: 0 4px; 
    border-bottom: 1px solid #eee; 
} 

Demo