js截取第一个字符串(javascript截取字符串的方法)


平时前端开发工作时,经常会需要对字符串进行截断,比如新闻标题,需要把超出可视区域后需要进行截断,如下图:

前端技巧:Javascript和Css截取字符串的方法比较

小编我由主要负责后端开发,最开始是采用后端方法来实现字符串截断,然后传递给前端人员使用。

但是这个方式有一个弊端,尤其是响应式的页面,截取字数无法精确控制,比如pc端可视区域可以显示150个字符,但是手机端屏幕最多只能显示20个字符,所以通过后端来控制字符数是非常烂的解决方案,最好的解决办法是通过前端方式来截断字符串,下面分别用javascript和css的方式来实现。

先看一下html部分

<div class="title">
为什么要制作高端的网站?高端网站建设价格为什么越来越高?
</div>

下面分别针对这行html进行截断操作。

1、javascript方式。

先封装一个截取字符串的方法,代码如下:

<script>
String.prototype.left = function (len) //左边截取字段数
{
 var str = this;
 if (isNaN(len) || len == null) {
 len = str.length;
 }
 else {
 if (parseInt(len) < 0 || parseInt(len) > str.length) {
 len = str.length;
 }
 }
 return str.substr(0, len);
}
</script>

然后再页面中采用jquery方式调用:

<script type="text/javascript">
 $(function () {
 var $title=(".title");
 var txt= $title.html().left(50); //截取前50个字符
 $title.html(txt); //重新
 });
</script>

这种方式可以实现字符串的截取,但是这种方法也不理想,pc端和手机端截取字数还是需要单独根据浏览器类型来定义。

2、css控制,这个是最推荐的解决方案

定义一个css类:

.title {
 white-space: nowrap;
 text-overflow: ellipsis; 
 overflow: hidden;
}

text-overflow: ellipsis; 这句意思是超出可视区域后显示三个点…,如果只想截断,可以改为: text-overflow:clip。

今天先写到这里,如果感觉对您有帮助,可以转发一下,后续有时间再分享一下前端技巧给大家。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发表评论

登录后才能评论