单/多行超出部分显示省略号

单/多行超出部分显示省略号

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