js封装的一行半显示省略号(字数自由控制)

$(function() {
//控制一行半隐藏
(function ($) {
$.fn.displayPart = function (opts) {
$(this).each(function () {
displayPart($(this), opts);
});
}
function displayPart($el, opts) {
var defaults = {
displayLength: 50 //具体的想要显示的字数
}
this.Settings = $.extend(defaults, opts);
if (this.Settings.displayLength == defaults.displayLength && $el.data("textcount")) {
this.Settings.displayLength = $el.data("textcount");
}
var displayLength = this.Settings.displayLength;
var text = $el.text();
if (!text) return "";
var result = "";
var count = 0;
for (var i = 0; i < displayLength; i++) {
var _char = text.charAt(i);
if (count >= displayLength) break;
if (/[^x00-xff]/.test(_char)) count++; //双字节字符,//[u4e00-u9fa5]中文
result += _char;
count++;
}
if (result.length < text.length) {
result += "...";
}
$el.text(result);
}
})(jQuery);
$("p").displayPart(); 
//控制一行半隐藏

})

ps:特别说明,中文,标点符号占2个字符,数字,英文占一个字符

转载于:https://www.cnblogs.com/zlzhang0305/p/7116428.html

您可以使用 JavaScript 中的字符串截取和拼接方法实现控制文本字数省略号展示的效果。下面是一个示例代码: ```js function limitText(str, maxLength) { if (str.length > maxLength) { return str.slice(0, maxLength) + '...'; } else { return str; } } // 示例用法 const text = '这是一段很长的文本,需要控制字数并展示省略号。'; const limitedText = limitText(text, 12); // "这是一段很长的文本,需..." console.log(limitedText); ``` 在上面的示例中,`limitText` 函数接收一个字符串和一个最大长度参数 `maxLength`。如果字符串的长度超过了最大长度,就使用 `slice` 方法截取前 `maxLength` 个字符,并在末尾添加省略号;否则直接返回原字符串。您可以根据需要调整 `maxLength` 参数的值来控制字数。 另外,如果您需要在 HTML 页面中使用该效果,可以将该函数封装在一个自定义指令中,然后在文本元素上使用该指令即可。例如: ```html <p v-text-limit="text">{{ text }}</p> ``` ```js Vue.directive('text-limit', { bind: function (el, binding) { el.textContent = limitText(binding.value, binding.arg); } }); // 示例用法 new Vue({ el: '#app', data: { text: '这是一段很长的文本,需要控制字数并展示省略号。' } }); ``` 在上面的示例中,我们使用 Vue.js 框架中的自定义指令功能,定义了一个名为 `text-limit` 的指令,该指令接收一个字符串作为值,并使用 `limitText` 函数截取并展示字数。在 HTML 页面中,我们使用 `v-text-limit` 指令将该指令绑定到 `<p>` 元素上,并将 `text` 数据作为值传递给指令。最终,该元素的内容将被截取并展示省略号
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值