web-dev-qa-db-fra.com

L'affichage de texte tronqué au survol à l'aide de points de suspension CSS chevauche le texte en dessous

J'ai une balise name dans la barre latérale qui devrait afficher une seule ligne et tronquer si le texte long est suivi par des points triples (lorem ipsum ...) et devrait afficher le texte intégral au survol.

Je peux y parvenir en utilisant CSS mais mon problème est que lorsque le texte intégral est affiché, il chevauche le texte en dessous. (Images jointes)

HTML

<p class="name">
    Lorem ipsum lorem ipsum lorem ipsum
</p>

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; 
}

Voici un JSFiddle

Texte se chevauchant au survol. Le comportement attendu est qu'il devrait pousser le contenu en dessous. enter image description here

htmlcsscss3ellipsis
10
Nakib

Vous pouvez simplement ajouter height:auto à l'état hover et cela fonctionnera très bien:

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 */
}
<p class="name">
Lorem ipsum lorem ipsum lorem ipsum ipsum lorem ipsum
</p>
<span>
  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.
</span>
25
Mi-Creativity

Face à un problème similaire avec certaines longues adresses e-mail dans un formulaire, j'ai créé cette solution où le contenu complet est affiché en survol dans un pseudo-élément de style info-bulle.

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;
  }
<div class="box">
  <p class='Ellipsis' data-text='f6cd8edc-60c2-11e7-9919-ef706e78474f'>f6cd8edc-60c2-11e7-9919-ef706e78474f</p>      
  <p class='Ellipsis' data-text='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.'>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.</p>
</div>

https://codepen.io/natalitique/pen/gRdmre

Nécessite l'utilisation d'un attribut de données avec le contenu complet.

18
Natalia