javascript - 如何将文本换行到每行数量相等的两行上？

Question

我正在网站上创建元素框(如果重要的话，包括 CodeIgniter、Bootstrap、jQuery)，其中标题通常比框本身长。我将文本包裹在框中，以便它可以显示在多行上。问题是在某些情况下它看起来仍然很丑。例如，文本“全新相机 Nikon 3600”换行如下:

Brand new photo camera Nikon
3600

相反，我希望每一行都更加均匀，如下所示:

Brand new photo
camera Nikon 3600

我可以做出有根据的猜测并在某些地方插入换行符，但应该有更好的方法。主要寻找 CSS 解决方案，但只要它有效，一些 JavaScript/jQuery 将受到欢迎。谢谢!

Answer 1

我开发了一个有点 working solution - 它并不完美，但它会找到中间空间并在那里 split 。话虽这么说，更好的解决方案可能涉及总字符数来找到最接近 true 中心的空间，甚至可能获取整行的宽度并将字符串的容器 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);
}

---

已知问题

• 这仅 split 一次。它依赖于将字符串分成两半，而不是多次。
• 如果字符浓度不太均匀，字符串将无法完美分割。它只计算空格，不考虑总字符。例如，如果您有以下句子“他是一位搞笑喜剧 Actor ”，则最中心空间两侧的字符差异很大。