Das Anzeigen von abgeschnittenem Text beim Hover mit CSS-Ellipsen überlappt den darunter liegenden Text

Lesezeit: 3 Minuten

Benutzeravatar von Nakib
Nakib

Ich habe ein name -Tag in der Seitenleiste, das eine einzelne Zeile anzeigen und abschneiden sollte, wenn langer Text von dreifachen Punkten gefolgt wird (lorem ipsum …) und beim Hover den vollständigen Text anzeigen sollte.

Ich kann dies mit CSS erreichen, aber mein Problem ist, wenn Volltext angezeigt wird, überlappt er den Text darunter. (Bilder angehängt)

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

Hier ist ein JSFiddle

Textüberlappung beim Hover. Das erwartete Verhalten ist, dass der Inhalt darunter verschoben werden sollte.
Geben Sie hier die Bildbeschreibung ein

  • Bitte erstellen Sie eine Fiddle auf jsfiddle.net

    – AMACB

    17. Januar 2016 um 0:38 Uhr

  • @AMACB jsfiddle.net/y25okb8L

    – Nakib

    17. Januar 2016 um 0:41 Uhr

Sie können einfach hinzufügen height:auto zum hover Zustand und es wird gut funktionieren:

JS Geige

.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>

Angesichts eines ähnlichen Problems mit einigen langen E-Mail-Adressen in einem Formular habe ich diese Lösung erstellt, bei der der vollständige Inhalt beim Hover in einem Pseudo-Element im Tooltip-Stil angezeigt wird.

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

Erfordert die Verwendung des Datenattributs mit dem vollständigen Inhalt.

  • Nett. Gibt es eine Möglichkeit, den doppelten Datentext nicht zu benötigen? Scheint überflüssig … kann so etwas wie innerHtml verwendet werden?

    – jjxtra

    18. Juli 2018 um 22:10 Uhr

  • Beachten Sie, dass diese Lösung dem Benutzer anscheinend nicht erlaubt, den gesamten Text zum Kopieren und Einfügen hervorzuheben. @Mi-Creativity answer bietet diese Funktionalität.

    – ImmerEindrücken

    2. Dezember 2019 um 20:34 Uhr

1430060cookie-checkDas Anzeigen von abgeschnittenem Text beim Hover mit CSS-Ellipsen überlappt den darunter liegenden Text

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy