Poniższy kod zawiera długi tekst, ale chcę jako podpowiedź.

.truncate {
  max-width: 160px;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.truncate:hover {
  text-overflow: clip;
  white-space: normal;
  word-break: break-all;
}
<span class="truncate"> HERE</span>
css
0
vrithika 1 wrzesień 2020, 15:35

2 odpowiedzi

Najlepsza odpowiedź

Użyj atrybutu tytułu, a nie stylu po najechaniu.

.truncate {
  max-width: 160px;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
}
<span class="truncate" title="HERE is my sample text HERE is my sample text"> 
    HERE is my sample text HERE is my sample text
</span>
0
Nitheesh 1 wrzesień 2020, 12:45

Jeśli chcesz dostosować podpowiedź, możesz użyć atrybutu danych.

.tooltip {
     position: relative;
}
 .tooltip-bottom:hover::after {
     content: attr(data-tooltip);
     padding: 4px 8px;
     position: absolute;
     left: 0;
     top: 100%;
     white-space: nowrap;
     z-index: 1;
     background-color: #000;
     color: #fff;
}
 .truncate {
     max-width: 100px;
     overflow: hidden;
     display: inline-block;
     text-overflow: ellipsis;
     white-space: nowrap;
}
<span class="tooltip tooltip-bottom" data-tooltip="HERE is my sample text HERE is my sample text"> 
  <p class="truncate">HERE is my sample text HERE is my sample text</p>
</span>
0
AbsoluteBeginner 1 wrzesień 2020, 15:28