2021-11-03 13:47:36
通常在前端开发工作中，经常需要对字符串进行截断，比如新闻标题，超出可视区域后需要进行截断，如下图所示：
我主要负责后端开发。一开始，我使用后端方法截断字符串，然后将其传递给前端人员。
然而，这种方法有一个缺点，尤其是在响应页面中，截取的字数无法精确控制。比如pc端的可视区域可以显示150个字符，而手机端的屏幕最多只能显示20个字符，所以通过后端控制字符数是一个非常糟糕的解决方案。最好的解决方案是通过前端截断字符串。以下方法分别由javascript和css实现。
先看html部分。
div class='title '
为什么要做高端网站？为什么高端网站的建设价格越来越高？
/div
下面是这一行html的截断操作。
1、javascript方式。
首先，封装一个拦截字符串的方法。代码如下：
脚本
string . prototype . left=function(len)//左侧截断字段的数量。
{
var str=this
if(ISnan(len)| | len==null){ 0
len=str.length
}
else {
if(ParSeint(len)0 | | ParSeint(len)str . length){ 0
len=str.length
}
}
返回str.substr(0，len)；
}
/script
然后在页面中以jquery模式调用它：
脚本类型=“文本/javascript”
$(function(){ 0
var $title=('。标题')；
var txt=$title.html()。左(50)；//截取前50个字符。
$ title . html(txt)；//再试一次。
});
/script
这个方法可以截取字符串，但是这个方法也不理想。pc和手机截获的字数还需要根据浏览器类型来定义。
2、css控制，这个是最推荐的解决方案
定义一个css类：标题{
white-space : nowrap；
文本-overflow:省略号；
飞越：隐藏；
}
文本-overflow:省略号；这句话的意思是超过可视区域后显示三个点.如果你只想剪掉，可以改成：text-overflow:clip。
我今天就在这里写。如果觉得对你有帮助，可以转发。以后有时间再和大家分享前端技能。
