添加標題標籤與文本溢出元素：省略號

Question

我不知道這是容易實現的，但我想我會問以防萬一：

我使用的名單上有以下CSS規則文本：

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

正如預期的那樣，就是那張在名單之外的任何文本將被截斷，並有放置在末尾的省略號。

我想只有那些觸發列表上text-overflow規則的列表項的活動標題標籤。因此，您可以將鼠標懸停在截斷的任何文本上並查看其全文的工具提示。

東西告訴我這很難，如果不是不可能的話。不過，我希望被證明是錯誤的。我最好尋找一種儘可能少使用JavaScript的解決方案。

Answer 1

我們使用了一個類似的更通用的ellipsify，它適用於大多數情況。我們也應用title屬性（對於所有元素）。如果元素橢圓化，只應用標題確實很困難。下面的例子假定，如果元素與父元素具有相同的寬度，我們應該設置標題。沒有if語句，它總是會應用標題。

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

可以測量溢出的存在少許JavaScript和只添加如果它的元素會溢出title屬性（如果不是被截斷）。

• 用樣式約束內容。
• 將內容複製到具有相同寬度的隱藏測試元素中。
• 不要限制包裝在測試元件上，使其溢出。
• 比較高度。

$(".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的使用這裏簡潔，但肯定不是必需的。}

Answer 3

這是我如何接近解決方案。

如果你不想使用java腳本。

這裏是一個鏈接撥弄：https://jsfiddle.net/fryc4j52/1/

片段：

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