平时前端研究事件时,总是会需要对字符串进行截断,例如新闻标题,需要把超出可视地区后需要进行截断,如下图:
小编我由主要负责后端研究,最开始是选用后端方法来实现字符串截断,之后传递给前端人员使用。
但是这种方法有一个弊端,尤其是响应式的页面,截断偷取字数无法精确控制,例如pc端可视地区应该展现150个字符,但是手机APP软件屏幕最多就只能展现20个字符,所以通过后端来控制字符数是超级烂的解决问题方案,最好的解决问题的办法是通过前端方法来截断字符串,下面分别用javascript和css的方法来实现。
先看一下html部分
怎么要*产高端的网址?高端网址建设售价怎么越来越高?
下面分别针对这行html进行截断操作。
1、javascript方法。
先封装一个截断偷取字符串的方法,代码如下:
String.prototype.left = function (len) //左边截断偷取字段数
{
var str = this;
if (isNaN(len) || len == null) {
len = str.length;
}
else {
if (parseInt(len) str.length) {
len = str.length;
}
}
return str.substr(0, len);
}
之后再页面中选用jquery方法调用:
$(function () {
var $title=(“.title”);
var txt= $title.html().left(50); //截断偷取前50个字符
$title.html(txt); //从头开始
});
这种方法应该实现字符串的截断偷取,但是这种方法也不理想,pc端和手机APP软件截断偷取字数还是需要单独根据浏览器类别来定义。
2、css控制,这种是最讲解的解决问题方案
定义一个css类:
.title {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
text-overflow: ellipsis; 这句意思是超出可视地区后展现三个点…,如果只想截断,应该改为: text-overflow:clip。
今天先写到这里,如果感觉对您有帮助,应该转发一下,后面有时间再共享一下前端技术给各位。