单/多行超出部分显示省略号
1.css单行超出部分显示省略号
overflow: hidden; // 超出的文本隐藏
text-overflow: ellipsis; // 溢出用省略号显示
white-space: nowrap; // 溢出不换行
2. css多行超出部分显示省略号
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; // 作为弹性伸缩盒子模型显示。
-webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp: 2; // 显示的行
3. js实现超出部分显示省略号
var text = '超出(2行-5字)显示省略号超出(2行-5字)显示省略号超出(2行-5字)显示省略号超出(2行-5字)显示省略号';
/* splitContent
* text 需要处理的文字
* box 盒子容器
* maxRow 文字超出多少行显示省略号
* offset 偏移值
*/
splitContent(text, box, 2, 5);
function splitContent(text, box, maxRow, offset) {
var re = /[^\x00-\xff]/g; // 匹配双字节字符
var style = getComputedStyle(box, null); // 获取盒子的样式
var w = parseInt(style.width);
var mSize = parseInt(style.fontSize);
var count = Math.floor(w / mSize); // 一行可显示多少字
var hasDouble = text.match(re);
var len = hasDoble ? (hasDouble.length + text.length) / 2 : text.length / 2;
var maxSize = count * maxRow; // 最多显示的文字个数
if (len > maxSize) {
for (var i = maxSize; i < text.length; i++) {
var mText = text.substr(0, i);
var has = mText.match(re);
var mLen = has ? (has.length + mText.length) / 2 : mText.length / 2;
if (mLen >= maxSize - offset) {
text = mText + '...' + '<a title="' + text + '" href="javascript:;">更多</a>';
break;
}
}
}
box.innerHTML = text;
}
效果图:
编辑于 2019-01-18 11:22