La visualizzazione del testo troncato al passaggio del mouse con l’ellissi CSS si sovrappone al testo sottostante

Nella sidebar ho un tag name che dovrebbe visualizzare una singola riga e troncare se il testo lungo segue i triple punti (lorem ipsum …) e dovrebbe mostrare il testo completo al passaggio del mouse.

Sono in grado di raggiungere questo objective utilizzando css, ma il mio problema è quando viene visualizzato il testo completo che si sovrappone al testo sottostante. (Immagini allegate)

HTML

 

Lorem ipsum lorem ipsum lorem ipsum

CSS

 .name{ color: #0079c1; height: 2em; line-height: 1em; font-size: 20px; font-weight: 400; text-overflow: ellipsis; margin-bottom: 12px; cursor: pointer; word-break: break-all; overflow:hidden; white-space: nowrap; } .name:hover{ overflow: visible; white-space: normal; } 

Ecco un JSFiddle

Testo che si sovrappone al passaggio del mouse. Il comportamento previsto è che dovrebbe spingere il contenuto sotto di esso. inserisci la descrizione dell'immagine qui

Puoi semplicemente aggiungere height:auto allo stato hover e funzionerà perfettamente:

JS Fiddle

 .name{ width:120px; color: #0079c1; height: 2em; line-height: 1em; font-size: 20px; font-weight: 400; text-overflow: ellipsis; margin-bottom: 12px; cursor: pointer; word-break: break-all; overflow:hidden; white-space: nowrap; } .name:hover{ overflow: visible; white-space: normal; height:auto; /* just added this line */ } 
 

Lorem ipsum lorem ipsum lorem ipsum ipsum lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem voluptate deserunt consequatur velit, alias ullam fuga aspernatur, ut doloremque eos fugiat quo a accusamus minus distinctio quasi, recusandae excepturi molestiae.

Affrontando problemi simili con alcuni indirizzi email lunghi in un modulo, ho creato questa soluzione in cui il contenuto completo viene visualizzato al passaggio del mouse in uno pseudo elemento in stile tooltip.

 body{ background:#eee; } .box{ background:#fff; box-shadow: 0 25px 30px 0 rgba(0,0,0,0.15); border:rgba(0,0,0,0.3); width:10rem; margin:2rem auto; padding:2rem; } .ellipsis { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all .2s linear; white-space: nowrap; padding:.5rem 1rem; } .ellipsis:focus, .ellipsis:hover { color:transparent; } .ellipsis:focus:after,.ellipsis:hover:after{ content:attr(data-text); overflow: visible; text-overflow: inherit; background: #fff; position: absolute; left:auto; top:auto; width: auto; max-width: 20rem; border: 1px solid #eaebec; padding: 0 .5rem; box-shadow: 0 2px 4px 0 rgba(0,0,0,.28); white-space: normal; word-wrap: break-word; display:block; color:black; margin-top:-1.25rem; } 
 

f6cd8edc-60c2-11e7-9919-ef706e78474f

Mauris ac eros odio. Etiam imperdiet vitae dolor eu feugiat. Pellentesque at ante dignissim, tincidunt ipsum quis, rutrum ante. Donec ac lorem nisl. Cras fringilla ex ut rutrum imperdiet. Fusce accumsan id est vel lacinia. Cras nec ligula eu velit mattis mollis. Nunc venenatis neque nibh, id dapibus orci aliquet id. Ut dictum mollis eros sed imperdiet. Phasellus quis enim nec felis sagittis varius. Ut et rutrum quam. Morbi id interdum felis. Mauris id dignissim odio.