我在网站标题(通常比盒子长)上创建网站(CodeIgniter,Bootstrap,jQuery,如果需要的话)的盒子。我将文本包装在框内,以便多行显示。问题是,在某些情况下它看起来仍然很丑陋。例如,文字“ Brand new photo camera Nikon 3600”会换成类似这样的文字:

Brand new photo camera Nikon
3600


相反,我希望它在每一行上都更像这样:

Brand new photo
camera Nikon 3600


我可以做出有根据的猜测,并在某些位置插入换行符,但是应该有更好的方法。主要寻找CSS解决方案,但是只要可以使用,就欢迎使用一些JavaScript / jQuery。谢谢!

最佳答案

我已经开发了一个working solution -它不是完美的,但是它将找到中间空间并在那里分割。话虽这么说,一种更好的解决方案可能涉及总字符数以找到最接近真中心的空间,或者甚至获取整行的宽度并将字符串的容器CSS设置为该宽度的一半。但是,除了时间,我什么都没有...

最终密码

function nth_occurrence (string, char, nth) {
    var first_index = string.indexOf(char);
    var length_up_to_first_index = first_index + 1;

    if (nth == 1) {
        return first_index;
    } else {
        var string_after_first_occurrence = string.slice(length_up_to_first_index);
        var next_occurrence = nth_occurrence(string_after_first_occurrence, char, nth - 1);

        if (next_occurrence === -1) {
            return -1;
        } else {
            return length_up_to_first_index + next_occurrence;
        }
    }
}

function splitValue(value, index) {
    return value.substring(0, index) + "," + value.substring(index);
}

function evenBreak(myString) {
    var count = (myString.match(/ /g) || []).length; //How many spaces are there
    var middle = Math.ceil(count/2); //Find the middle one

    var middleIndex = nth_occurrence(myString, " ", middle); //Get the index of the middle one
    var splitString = splitValue(myString, middleIndex).split(","); //Split the string into two pieces at our middle

    myString = splitString[0] + "<br>" + splitString[1].substring(1); //Put it back together with a line break between

    return myString;
}

var str = evenBreak("This is our newly split string with a line break in the center!");
alert(str);




我们如何到达那里

首先,我们需要找出有多少空间...

var count = (temp.match(/ /g) || []).length;


现在我们知道有X个空格,可以通过执行以下操作找到最中间的空格...

var middle = Math.ceil(count/2);


但是我们如何在字符串中找到中间空间在哪里呢?这是我从another question那里抢来的东西...

function nth_occurrence (string, char, nth) {
    var first_index = string.indexOf(char);
    var length_up_to_first_index = first_index + 1;

    if (nth == 1) {
        return first_index;
    } else {
        var string_after_first_occurrence = string.slice(length_up_to_first_index);
        var next_occurrence = nth_occurrence(string_after_first_occurrence, char, nth - 1);

        if (next_occurrence === -1) {
            return -1;
        } else {
            return length_up_to_first_index + next_occurrence;
        }
    }
}


好的,所以我们确切地知道了要在哪里放置换行符。但是我们需要一个函数来做到这一点。我将使用以下功能在此处拆分字符串并在它们之间放置换行符...

function splitValue(value, index) {
    return value.substring(0, index) + "," + value.substring(index);
}




已知的问题


这仅分裂一次。它仅依赖于将字符串切成两半,而不是多次。
如果字符集中度不太均匀,则字符串将无法完美分割。它仅计算空格,不考虑总字符数。例如,如果您有以下句子“他是一个搞笑的喜剧演员”,则最中间空格两侧的字符差异很大。

关于javascript - 如何将文本包装在两行上,每行上的行数相等?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39900860/

10-12 07:09