Il testo di overflow degli elementi di allineamento di Flexbox viene tagliato in cima

Ho la seguente situazione, il testo viene tagliato nella parte superiore quando non si adatta più all’interno del contenitore. Cosa posso fare per risolverlo? Mi piacerebbe comunque che il testo fosse centrato se è più piccolo del contenitore e non posso modificare le dimensioni del contenitore.

Se avvolgi il testo in un altro tag e imposta margin: auto 0; sembra che funzioni bene.

 div { display: flex; width: 100px; height: 50px; overflow: auto; word-break: break-word; background: pink; margin-bottom: 20px; } span { margin: auto 0; } 
 
sdjhfkahsdkjfadsfhk jaskjfsj fsldflkasjklsjflakj flksjfakljflksjflkasfjklasjflfd
sdjhfkah

Il problema qui è causato dal fatto che quando si utilizzano gli align-items (o il justify-content ) per centrare un object di riga flessibile, esso verrà, in base alla progettazione, troppo pieno nella sua parte superiore / inferiore (o sinistra / destra).

Per risolvere il problema, viene introdotta una nuova parola chiave, safe , sebbene non siano ancora supportati da molti browser.

  • Come usare il centro di sicurezza con la flexbox?

L’altra opzione è usare i margini automatici, anche se con il dato markup non è ansible, poiché il testo non ha un wrapper interno (beh, ne ha uno anonimo, benché quelli che non possono essere scelti come target con un selettore CSS) .

Quindi, aggiungendo un wrapper interno ( violino con wrapper ) puoi usare il margine automatico, ed è ben spiegato qui:

  • Imansible scorrere all’inizio dell’articolo flessibile che sta straripando il contenitore

Ma a volte non possiamo modificare il markup e quando, ecco un piccolo trucco, usare gli pseudo elementi e usare il margine automatico su di essi.

Per centrare verticalmente il testo abbiamo anche bisogno della direzione della flessione per essere la column modo che la pseudo sia resa sopra / sotto.

Stack snippet

 div { display: flex; flex-direction: column; /* added */ width: 100px; height: 50px; overflow: auto; word-break: break-word; border: 1px solid gray; } div::before, div::after { content: ''; } div::before { margin-top: auto; /* added */ } div::after { margin-bottom: auto; /* added */ } 
 
sdjhfkahsdkjfadsfhk jaskjfsj fsldflkasjklsjflakj flksjfakljflksjflkasfjklasjflfd
sdjhf