Più righe in una casella con ellissi e allineamento verticale intermedio

Question

Ho contenitori con contenuto dinamico e più righe di testo. Voglio mostrare i puntini di sospensione (...) se il testo non si adatta al contenitore. Inoltre dovrebbe essere allineato verticalmente al centro.

Ho creato un Codepen http://codepen.io/anon/pen/ewnxG con questo HTML:

<div class="vertically-centered">vertically centered with</div> 
<div class="vertically-centered">vertically centered with hello</div> 
<div class="vertically-centered">one line</div> 

e questo CSS:

.vertically-centered { 
    border: 1px solid red; 
    height: 6rem; 
    overflow: hidden; 
    font-weight: bold; 
    font-size: 2.5rem; 
    text-overflow: ellipsis; 
    width: 300px; 
    line-height: 1.2; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
} 

.vertically-centered:after { 
    content: ""; 
    height: 100%; 
    display: inline-block; 
    vertical-align: middle; 
} 

In IE11 e di Firefox i puntini di sospensione "..." sono mancanti, che va bene per me . In Safari e Chrome funziona.

Si vede che il primo div non funziona, il testo è troncato. Il secondo e il terzo div funzionano. Quindi la mia soluzione dipende dalla lunghezza del testo. Come posso risolvere questo problema senza usare JavaScript?

Answer 1

Si prega di verificare questa semplice soluzione senza markup ulteriore:

.vertically-centered { 
 
    border: 1px solid red; 
 
    height: 6rem; 
 
    overflow: hidden; 
 
    font-weight: bold; 
 
    font-size: 2.5rem; 
 
    text-overflow: ellipsis; 
 
    width: 300px; 
 
    line-height: 1.2; 
 
    display: flex; /* enables centering for modern non-webkit browsers */ 
 
    flex-direction: column; 
 
    justify-content: space-around; /* centers for modern non-webkit browsers */ 
 
    display: -webkit-box; 
 
    -webkit-line-clamp: 2; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-pack: center; /* centers in -webkit-box automagically! */ 
 
}

<div class="vertically-centered">vertically centered with</div> 
 
<div class="vertically-centered">vertically centered with hello</div> 
 
<div class="vertically-centered">one line</div>

È anche possibile vedere questa soluzione in azione nel edited CodePen example.

Come funziona: il tuo codice originale sta già utilizzando il layout Flexbox per i browser basati su WebKit (in realtà, è datato 2009 sintassi del Flexbox, ma, purtroppo, -webkit-line-clamp non funziona con le nuove implementazioni). Flexbox ha il suo meccanismo per il centraggio verticale. Tutto ciò che serve per ottenere il comportamento desiderato in browser basati su WebKit è quello di rimuovere lo pseudo-elemento :after e aggiungere invece la seguente riga di codice per .vertically-centered:

-webkit-box-pack: center; 

Per gli altri browser moderni come Firefox e 22+ IE11 +, è possibile lo stesso layout (tranne i puntini di sospensione, ma lei ha detto che è OK) si ottiene utilizzando la nuova versione di Flexbox:

display: flex; 
    flex-direction: column; 
    justify-content: space-around; 

Questo deve essere posto al di sopra display: -webkit-box nel codice, in modo da WebKit dei browser essere ancora in grado di applicare -webkit-line-clamp.

Si può anche farlo funzionare in IE10, aggiungendo la sua versione prefissato di Flexbox (2011 sintassi di transizione):

display: -ms-flexbox; 
    -ms-flex-direction: column; 
    -ms-flex-pack: center; 

La penna con supporto IE10 è qui: http://codepen.io/anon/pen/otHdm

L'approccio centratura verticale :after non ha funzionato per te nella prima 'cella' per il seguente motivo: per le finestre CSS di livello ilnine (come il solito testo, blocchi incorporati, immagini ecc.) vertical-align regola le linee di base di tutte le caselle di questo tipo che formano una casella di riga (vedi CSS2.1 spec). L'altezza del riquadrato di riga viene calcolata in modo tale che tutte le caselle a livello in linea della linea si adattino a esso, pertanto l'altezza della casella di riga non può essere inferiore all'altezza del riquadro di livello inline più alto. Così il vostro :after blocco in linea, che ottiene il 100% della altezza del contenitore, diventa l'elemento più alto del ultima linea del blocco, ed a causa di vertical-align: middle linea di base del testo in quella ultima linea viene spostata per incontrare il verticale metà del testo con la parte centrale di questo blocco in linea alto. Questo è OK quando c'è solo una calce (è il tipico caso d'uso per tale centraggio) e quando l'ultima riga è nascosta con overflow, ma non OK quando è visibile).

Answer 2

Ciò è possibile ma richiederà alcune modifiche al markup.

• aggiungere il supplemento div s intorno al testo
• Aggiungi .vertically-centered div selettore con le seguenti regole:
  • display: inline-block; come ripiego per i browser non WebKit, necessari per l'allineamento verticale
  • display: -webkit-inline-box; per i browser WebKit
  • max-height: 100%; per garantire che il div sia solo l'altezza del testo se è minore del contenitore e alto quanto il contenitore se cresce più grande di t
  • vertical-align: middle; per garantire il div si trova al centro del contenitore
• Spostare le regole responsabile per le ellissi da .vertically-centered a .vertically-centered div

Perché il div aggiuntivo richiesto?

Il testo a sé stante è in linea in modo che solo l'ultima riga sia allineata verticalmente allo pseudo elemento . Quindi:

• Il primo esempio sembra errato perché la linea "centrato con" è allineata verticalmente al centro dello pseudo elemento.
• Il secondo esempio sembra ok perché il "ciao" nascosto viene allineato verticalmente, le altre linee si adattano bene alla scatola.
• Il terzo esempio è l'unico effettivamente allineato verticalmente nel mezzo utilizzando questo metodo.

di vedere chiaramente questo nel cambiamento azione .vertically-centered:after-.vertically-centered:before, vedrete che ora la prima linea "in verticale" è nel mezzo.

L'aggiunta del contenitore aggiuntivo consente di allineare verticalmente l'intero contenuto del testo anziché una sola riga.

Codice della penna:http://codepen.io/anon/pen/htbxA

.vertically-centered { 
 
     border: 1px solid red; 
 
     height: 6rem; 
 
     overflow: hidden; 
 
     font-weight: bold; 
 
     font-size: 2.5rem; 
 
     width: 300px; 
 
     line-height: 1.2; 
 
    } 
 

 
    .vertically-centered:after { 
 
     content: ""; 
 
     height: 100%; 
 
     display: inline-block; 
 
     vertical-align: middle; 
 
    } 
 

 
    .vertically-centered div { 
 
     display: inline-block; 
 
     display: -webkit-inline-box; 
 
     max-height: 100%; 
 
     vertical-align: middle; 
 
     -webkit-box-orient: vertical; 
 
     -webkit-line-clamp: 2; 
 
    }

<div class="vertically-centered"><div>vertically centered with</div></div> 
 
    <div class="vertically-centered"><div>vertically centered with hello</div></div> 
 
    <div class="vertically-centered"><div>one line</div></div>

Answer 3

ho cambiato il vostro css un po '. Ho aggiunto un po 'di padding al div. Verticalmente centrato e impostato la larghezza del. Verticalmente centrato: dopo div e presto! Credo che il problema era che non c'era una larghezza definita in. verticalmente centrata: dopo div. ecco la mia soluzione

.vertically-centered { 
    border: 1px solid red; 
    height: 6rem; 
    overflow: hidden; 
    padding: 10px; 
    font-weight: bold; 
    font-size: 2.5rem; 
    text-overflow: ellipsis; 
    width: 300px; 
    line-height: 1.2; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 


} 

.vertically-centered:after { 
    content: ""; 
    height: auto; 
    width: 100%; 
    display: inline-block; 
    vertical-align: middle; 

} 

Spero che questo aiuti!

Answer 4

qui si può trovare una soluzione semplificata:

.vertically-centered { 
    margin: 0 auto; 
    border: 1px solid red; 
    font-size: 50px; 
    width: 300px; 
    display: -webkit-flex; 
    -webkit-align-items: center; 
} 

.vertically-centered p { 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
    max-height: 106px; /* set max-height for ie */ 
} 

per un markup come questo:

<div class="vertically-centered"><p>vertically centered with</p></div> 
<div class="vertically-centered"><p>vertically centered with hello</p></div> 
<div class="vertically-centered"><p>one line</p></div> 

un esempio: http://codepen.io/srekoble/pen/pHgjf

Come si vedrà che si potrebbe avvolgere il testo all'interno ap tag in modo da poter applicare il metodo truncate al tag p e il metodo di allineamento verticale al tag div

Answer 5

se si mette il testo all'interno delle div all'interno <p></p> e aggiungere questo:

.vertically-centered p { 
    margin: 0; 
    display:block; 
    transform: translateY(-50%); 
    top:50%; 
    position:relative; 
} 

allora dovrebbe fare il trucco.

Answer 6

Non possibile se si desidera che questo funzioni in Internet Exporer.

Here è un bel paio di esempi che funzionano in IE:

• Fade Out Way (! CSS)
• Clamp.js Way (javascript)
• TextOverflowClamp.js Way (javascript)

Personalmente io uso http://dotdotdot.frebsite.nl/