超出部分使用...显示(css和 js)方法
发布在随笔2017年1月9日view:249HTML5CSSJavaScript移动开发j's插件j's插件js插件前端工具网页设计
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

超出部分使用…显示(css和 js)方法

css方法

display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2; //显示2行  多余部分...
-webkit-box-orient: vertical;

js方法 固定长度 超出部分…显示

function cutString(str, len) {
 //length属性读出来的汉字长度为1
 if(str.length*2 <= len) {
  return str;
 }
 var strlen = 0;
 var s = "";
 for(var i = 0;i < str.length; i++) {
  s = s + str.charAt(i);
  if (str.charCodeAt(i) > 128) {
   strlen = strlen + 2;
   if(strlen >= len){
    return s.substring(0,s.length-1) + "...";
   }
  } else {
   strlen = strlen + 1;
   if(strlen >= len){
    return s.substring(0,s.length-2) + "...";
   }
  }
 }
 return s;
}

[更多方法](http://www.zhangxinxu.com/wordpress/2009/09/%E5%85%B3%E4%BA%8E%E6%96%87%E5%AD%97%E5%86%85%E5%AE%B9%E6%BA%A2%E5%87%BA%E7%94%A8%E7%82%B9%E7%82%B9%E7%82%B9-%E7%9C%81%E7%95%A5%E5%8F%B7%E8%A1%A8%E7%A4%BA/#zxx_e

评论
发表评论
暂无评论
WRITTEN BY
一诺
水滴石穿不是因为力量 而是因为坚持
TA的新浪微博
PUBLISHED IN

我的收藏