剃刀視圖：用三個點將文本縮小並用工具提示顯示全文

Question

如果長度超過限制，我會在字符串末尾顯示點。但我也希望在懸停時顯示全文文字提示。我不知道如何將它實現到剃鬚刀視圖元素。

@(item.Data.Title.Length > 10 ? item.Data.Title.Substring(0, 10) + "..." : item.Data.Title) 

Answer 1

你可以通過jquery和bootstrap實現工具提示，如下所示。

的jsfiddle例如：https://jsfiddle.net/z4upto60/

CSHTML：

<div> 
    <a data-toggle="tooltip" title="@item.Data.Title"> 
     @(item.Data.Title.Length > 10 ? item.Data.Title.Substring(0, 10) + "..." : item.Data.Title) 
    </a> 
</div> 

的jQuery：

if('@item.Data.Title.Length' > 10) 
{ 
    $('a[data-toggle="tooltip"]').tooltip({ 
     animated: 'fade', 
     placement: 'bottom', 
    }); 
}