h5 省略号完美适配 ios android

2022-02-22 本文已影响0人 cain07

发现在 android ios 部分手机中低版本手机超长省略号不起作用有可能是控件写法也可能是低版本不支持省略号我做了个头像下面作者名称超长不显示省略号

写法如下部分手机不起作用

.item{
              font-size: 12px;
                font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
                overflow:hidden;
                width: 80px;
                text-overflow:ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-box-pack: center;
                -webkit-box-align: center;
                -webkit-line-clamp:1;
                overflow: hidden;
            }

1.解决：不起作用

注：在less里引入时，一定要记得不要编译-webkit开头的东西，加上less注释就好了

/*! autoprefixer: off */
-webkit-box-orient: vertical;
/*! autoprefixer: on */

在下面的代码中加行注释就可以了
      overflow:hidden; 
      text-overflow:ellipsis;
      display:-webkit-box;
      /*! autoprefixer: off */
      -webkit-box-orient:vertical;
      -webkit-line-clamp:2;

2.解决：js 方法一这种可以控制字数可以但是英文显示会很短中文显示长一点不理想

// 字数限制30字,超出不显示
fontNumber (date) {
  const length = date.length
  if (length > 30) {
    var str = ''
    str = date.substring(0, 30) + '......'
    return str
  } else {
    return date
  }
}

3.解决：js 方法二这种方法通过计算控件的长度应该可以但是我的是一个列表不方便获取控件

    <style type="text/css">
        * {
            font-size: 9pt;
        }
        .container {
            overflow: hidden;
            background: #f1f1f1;
            white-space: nowrap;
        }
        .container .label {
            overflow: hidden;
            white-space: nowrap;
        }
    </style>
    <script type="text/javascript">
        function getText(el) {
            return el.innerText || el.textContent;
        }
        function setText(el, text) {
            if (el.innerText) {
                el.innerText = text;
            } else if (el.textContent) {
                el.textContent = text;
            }
        }

        function updateEllipsis(container, label) {
            if (container.scrollWidth > container.offsetWidth) {

                var text = getText(label);
                //此处重要，利用container的实际宽度和显示宽度的比例计算出文字显示的个数，然后，截取出来并在末位加上...
                var len = container.offsetWidth / container.scrollWidth * text.length;
                setText(label, text.substring(0, Math.floor(len) - 1) + "...");
                label.title = text;
            } else {
                if (label.title != "") {
                    setText(label, label.title);
                    label.title = "";
                }
            }
        }

        function init() {
            var div1 = document.getElementById("div1");
            var lab1 = document.getElementById("lab1");
            updateEllipsis(div1, lab1);

        }
    </script>
</head>

<body onload="init();">
<div class="container" style="width:50%" id="div1">
    <label class="label" id="lab1">自动显示省略号自动显示省略号自动显示省略号自动显示省略号自动显示省略号自动显示省略号自动显示省略号自动显示省略号自动显示省略号自动显示省略号</label>
</div>

4.解决：js 方法这个非常好完美解决这个挨个字符判断中文占2个英文占1个

cutString(str, len = 8) {
      //length属性读出来的汉字长度为1
      if(str.length*2 <= len) {
        return str;
      }
      let strlen = 0;
      let s = "";
      for(var i = 0;i < str.length; i++) { //遍历字符中每一个
        s = s + str.charAt(i); // charAt返回指定索引处的char值 取出每一个字符 再叠加到s
        if (str.charCodeAt(i) > 128) { //遍历判断字符串中每个字符的Unicode码,大于255则为中文  汉子 strlen 长度加 2 英文加1  当长度超过 8 的时候  如果  判断最后一个 字符 进行截取 
          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;
    }
  }

5.解决：js 方法

首先先说一个方法，就是有中文的时候，计算真实的长度

function getRealLen( str ) {
   return str.replace(/[^\x00-\xff]/g, 'aa').length; //这个把所有双字节的都给匹配进去了
}

原理是利用正则把中文变成"aa"两个字符串，然后计算长度

然后接下来是重点

/* * 
 用途：js中字符串超长作固定长度加省略号（...）处理
 参数说明：
    str:需要进行处理的字符串，可含汉字
    len:需要显示多少个汉字，两个英文字母相当于一个汉字
 */
function beautySub(str, len) {
    var reg = /[\u4e00-\u9fa5]/g,slice = str.substring(0, len),
        cCharNum = (~~(slice.match(reg) && slice.match(reg).length)),
        realen = slice.length*2 - cCharNum-1;
    return str.substr(0, realen) + (realen < str.length ? "..." : "");
}

slice = str.substring(0, len)：这里是为了先减少字符，达到优化
realen = slice.length*2 - cCharNum-1：这里减1是为了处理万一超过字符串，不显示多一个不是汉字的字符，
然后最后就是截取要求的字符，后面加上省略号（“...”）
如果限制 4个汉子只有四个汉子时候也会加上... 修改为

    beautySub(str) {
      if (str.length > 4) {
        let reg = /[\u4e00-\u9fa5]/g, slice = str.substring(0, 4),
          cCharNum = (~~(slice.match(reg) && slice.match(reg).length)),
          realen = slice.length * 2 - cCharNum - 1;
        return str.substr(0, realen) + (realen < str.length ? "..." : "");
      }else {
        return str;
      }
    },