发现在 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;
}
},
6.解决：js 方法 拿到列表中的控件 字符串按个填入控件 计算控件长度 超出长度...
参考
http://www.phperz.com/article/17/0526/327041.html
http://www.phperz.com/article/17/0708/332190.html
https://m.php.cn/article/389151.html
https://blog.csdn.net/hj7jay/article/details/98973645
https://www.cnblogs.com/dandan00056/articles/11112372.html
https://m.jingyanlib.com/resultpage?id=s59kX4RJjerhwN1DI4FW9w
网友评论