js控制一行最多放多少文字，并把多余的放到第二行，同时可以手动调整每行放多少字

初始效果是这样的，是通过下面这段代码切割了整个字符串，分别放到两个盒子里

 var sub = function (str, n) {
     var r = /[^\x00-\xff]/g;
     if (str.replace(r, "mm").length <= n) {
         return str;
     }
     var m = Math.floor(n / 2);
     for (var i = m; i < str.length; i++) {
         if (str.substr(0, i).replace(r, "mm").length >= n) {
             return {
                 first: str.substr(0, i),
                 last: str.substr(i, str.length)
             };
         }
     }
     return str;
};

var maxLength = 28;
var title = "ACTECO 1.6L TGDI贴合生活的编程思想更重要";
var text = sub(title, maxLength);
var str1 = '', str2 = '';

if(typeof text == "object"){
    for (i = 0; i < text.first.length; i++) {
        str1 += "<span>" + text.first.substr(i, 1) + "</span>";
    }
    for (i = 0; i < text.last.length; i++) {
        str2 += "<span>" + text.last.substr(i, 1) + "</span>";
     }
    $('#first').html(str1);
    $('#last').html(str2);
}else{
     $('#first').html(text);
}

但是在比较严肃的地方，编程思想四个字必须要放在一行的，所以就需要调整，但是客户嫌自己输入太麻烦，所以就写了这么一个小功能，点击第一行的文字，把这个文字包括后面的文字放到第二行，点击第二行，就把这个文字包括前面的文字放到第一行，同时限制第一行不能放太多，具体代码：

$(document).on('click', '#first span', function () {
    layer.closeAll();
    var html = '<span>'+ $(this).text() +'</span>';
    $(this).addClass('this').siblings().removeClass('this');
    if($(this).nextAll().length > 0){
        $(this).nextAll().each( function () {
            html += '<span>'+ $(this).text() +'</span>';
            $(this).remove();
        })
    }
    $(this).remove();
    $('#last').prepend(html);
});

$(document).on('click', '#last span', function () {
    layer.closeAll();
    var r = /[^\x00-\xff]/g;
    var haslength = $('#first').text().replace(r, 'aa').length;
    var addlength = 0;
    var html = '', str = '';
    $(this).addClass('this').siblings().removeClass('this');
    $(this).prevAll().each( function () {
        html += '<span>'+ $(this).text() +'</span>';
        str += $(this).text();
    });
    html += '<span>'+ $(this).text() +'</span>';
    str += $(this).text();
    addlength = str.replace(r, 'aa').length;
    if((haslength + addlength) > maxLength){
        layer.msg('第一行放不了这么多啦', function () { });
        return
    }
    $('#first').append(html);
    $(this).prevAll().remove();
    $(this).remove();
})

如果对你有用的话记得点赞哦，不懂的可以留言问我😄