dodać tytuł tag do elementów z text-overflow: wielokropek

Question

Nie jestem pewien, czy to jest możliwe łatwe, ale myślałem, że chciałbym zapytać na wszelki wypadek:

Używam następujących reguł CSS na liście tekst:

{ 
    width: 100px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

Zgodnie z oczekiwaniami, dowolny tekst, który wykracza poza listy zostaną obcięte i mają wielokropek umieszczony na końcu.

Chcę mieć aktywny tag tytułu tylko dla tych elementów listy, które wyzwalają regułę text-overflow na liście. Możesz więc najechać kursorem myszy na dowolny tekst, który jest obcięty, i wyświetlić etykietę z pełnym tekstem.

Coś mi mówi, że jest to trudne, jeśli nie niemożliwe. Chciałbym jednak, aby udowodniono, że jest źle. Preferuję rozwiązanie, które wykorzystuje tak mało javascript, jak to tylko możliwe.

Answer 1

Używamy podobnej, bardziej ogólnej elipsyzacji, która doskonale sprawdza się w większości przypadków. Stosujemy również atrybut title (dla wszystkich elementów). Stosowanie tytułu tylko w przypadku elipsy jest rzeczywiście trudne. Poniższy przykład zakłada, że ​​jeśli element ma taką samą szerokość jak nadrzędny, powinniśmy ustawić tytuł. Bez instrukcji if zawsze stosowałby ten tytuł.

document.querySelectorAll('.ellipsify').forEach(function (elem) { 
 
    if (parseFloat(window.getComputedStyle(elem).width) === parseFloat(window.getComputedStyle(elem.parentElement).width)) { 
 
    elem.setAttribute('title', elem.textContent); 
 
    } 
 
});

.ellipsify { 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    max-width: 100%; 
 
    display: inline-block; 
 
} 
 

 
div { 
 
    width: 100px; 
 
}

<div> 
 
    <span class="ellipsify">dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> 
 
    <span class="ellipsify">dolor sit amet</span> 
 
</div>

Answer 2

można mierzyć na obecność przelewem z odrobiną JavaScript i tylko dodać atrybut title jeśli to element byłby przepełniony (gdyby nie został obcięty).

• Ogranicz treść za pomocą stylu.
• Skopiuj zawartość do ukrytego elementu testowego o tej samej szerokości.
• Nie ograniczaj zawijania na elemencie testowym, co może spowodować przepełnienie.
• Porównaj wysokości.

$(".smart-overflow").each(function() { 
 

 
    var elementToTest = $(this), 
 
    contentToTest = $(this).text(), 
 
    testElement = $("<div/>").css({ 
 
     position: "absolute", 
 
     left: "-10000px", 
 
     width: elementToTest.width() + "px" 
 
    }).appendTo("body").text(contentToTest); 
 

 
    if (testElement.height() > elementToTest.height()) { 
 
    elementToTest.attr("title", contentToTest); 
 
    } 
 
});

.smart-overflow { 
 
    width: 100px; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="smart-overflow"> 
 
    short text 
 
</div> 
 
<div class="smart-overflow"> 
 
    short text 
 
</div> 
 
<div class="smart-overflow"> 
 
    Longer text; there should be a tooltip here. 
 
</div> 
 
<div class="smart-overflow"> 
 
    More long text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum lorem eget justo tempus posuere. Integer ac sagittis nisi. Phasellus eu malesuada sapien. Aliquam erat volutpat. Nunc aliquet neque sagittis eros ullamcorper, 
 
    blandit facilisis magna gravida. Nulla a euismod turpis. 
 
</div> 
 
<div class="smart-overflow"> 
 
    More long text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum lorem eget justo tempus posuere. Integer ac sagittis nisi. Phasellus eu malesuada sapien. Aliquam erat volutpat. Nunc aliquet neque sagittis eros ullamcorper, 
 
    blandit facilisis magna gravida. Nulla a euismod turpis. 
 
</div> 
 
<div class="smart-overflow"> 
 
    short text 
 
</div> 
 
<div class="smart-overflow"> 
 
    short text 
 
</div>

_{jQuery stosowane tutaj zwięzłości, ale z pewnością nie jest wymagane.}

Answer 3

Oto jak podszedłem do rozwiązania.

Jeśli nie chcesz używać skryptu java.

Oto link do fiddle: https://jsfiddle.net/fryc4j52/1/

SNIPPET:

.ellipse{ 
 
    width: 100px; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
.content li{ 
 
    margin:0; 
 
    padding:0; 
 
    overflow:hidden; 
 
} 
 
.ellipse:hover{ 
 
    width: auto; 
 
    border: 2px solid #eee; 
 
    box-shadow: 0px 3px 10px 0px black; 
 
    padding:2px; 
 
    white-space: normal; 
 
    word-break: break-word; 
 
    z-index:5; 
 
}

<ul class="content"> 
 
    <li class="ellipse">A very looooooooooooooooooooooooooooooooooooooong line.</li> 
 
    <li> Other text</li> 
 
    <li class="ellipse">A veryvvvvvvvvvvvvvvvvvvvvvvverrrrryyyyyyyyy looooooooooooooooooooooooooooooooooooooong line.</li> 
 
</ul>

Answer 4

document.querySelectorAll('.ellipsis').forEach(function (e) { 
     if (e.offsetWidth < e.scrollWidth) { 
      e.setAttribute('title', e.textContent); 
     } else{ 
      e.removeAttribute('title'); 
     } 
    }); 

.ellipsis { 
    text-overflow: ellipsis; 
    display: inline-block; 
    max-width: 100%; 
    overflow: hidden; 
    white-space: nowrap; 
}