多行文字超出 JS省略號...
(function($) {
$(".first-button").on("click", function(event){
$(".first-text").ellipsis(200);
$(this).hide();
});
})(jQuery);
(function($) {
$.fn.ellipsis = function(charCount) {
return $(this).each(function() {
var el = $(this);
var originalText = el.html();
var originalTextLength = originalText.length;
var tempNode = $(this.cloneNode(true));
var min = 0;
var max = charCount;
if(charCount < originalTextLength){
if (min<=max){
var tooltipHTML = null;
var trimLocation = (min + max);
var text = originalText.substr(0, trimLocation);
tempNode.html(text + "…");
tooltipHTML = '<span style="position:relative"><span class="ellipsis-tooltip-theme ellipsis-tooltip" style="margin-top:0.3%">'+originalText+'<span class="ellipsis-tooltip-nub"></span></span ></span >';
el.after(tooltipHTML);
}
if (min > max) {
//If the max value is greater than the min value, just raise a warning.
console.log('character count has to be greater than 0.');
}
}
else {
return false;
}
el.html(tempNode.html());
tempNode.remove();
el.mouseenter(function(){
el.parent().find('.ellipsis-tooltip').fadeIn(500);
});
el.mouseleave(function(){
el.parent().find('.ellipsis-tooltip').fadeOut(500);
});
});
};
})(jQuery);
相關文章
- 微信小程式 文字超出省略號微信小程式
- 文字超出顯示省略號及更多
- CSS——文字超出隱藏顯示省略號CSS
- CSS文字超出長度用省略號替代CSS
- 多行文字加省略號的處理方法
- css 多行文字溢位省略號顯示CSS
- CSS實現超出文字以省略號顯示CSS
- css超出顯示省略號CSS
- js獲取字串的位元組數(適合用於多行文字省略號)JS字串
- 超出文字顯示省略號,hover效果:文字滾動顯示==》求解
- 讓超出的文字以省略號顯示程式碼例項
- 如何用 CSS 實現多行文字的省略號顯示CSS
- css文字超出div隱藏剩下內容並顯示省略號CSS
- css文字超出2行就隱藏並且顯示省略號CSS
- CSS實現單行、多行文字溢位顯示省略號CSS
- CSS實現單行、多行文字溢位顯示省略號(…)CSS
- 如何讓超出範圍的文字自動顯示為省略號(CSS)CSS
- CSS3多行顯示省略號...CSSS3
- Android支援多行文字省略EllipsizeAndroid
- CSS文字加省略號CSS
- css限制顯示字數,文字長度超出部分用省略號表示【轉】CSS
- 直播電商平臺開發,css實現超出部分顯示省略號,控制文字CSS
- 一對一平臺製作,如何實現文字超出顯示為省略號?
- CSS省略號text-overflow超出溢位顯示省略號(需要與overflow配合使用)CSS
- 【前端芝士樹】純CSS實現多行文字溢位顯示省略號前端CSS
- 直播軟體app開發,單行或多行文字溢位,省略號代替APP
- 微信小程式教程:文字超出顯示區域後隱藏並顯示省略號微信小程式
- CSS實現單行、多行文字溢位顯示省略號的實現方法CSS
- 當內容超出最大的長度的時候,使用CSS使文字顯示省略號CSS
- css超出隱藏顯示省略號怎麼設定?CSS
- css 一行顯示超出部分顯示省略號CSS
- [CSS LEARN] 多行省略CSS
- css文字溢位用省略號表示CSS
- 如何實現溢位文字省略號
- CSS文字溢位用省略號替代CSS
- css文字溢位顯示省略號CSS
- css 單行文字溢位顯示省略號CSS
- ✨HeyUI新元件:TextEllipsis多行省略✨✨UI元件