【问题标题】：How to wrap text on two rows having equal amount on each?如何将文本换行在每行具有相等数量的两行上？
【发布时间】：2016-10-06 16:09:19
【问题描述】：

我正在网站上创建项目框（CodeIgniter、Bootstrap、jQuery，如果重要的话），其中标题通常比框本身长。我将文本包装在框中，因此它可以放在多行上。问题是在某些情况下它仍然看起来很丑。例如，文本“Brand new photo camera Nikon 3600”换行如下：

Brand new photo camera Nikon
3600

相反，我希望它在每一行上更均匀，如下所示：

Brand new photo
camera Nikon 3600

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

【问题讨论】：

拆分单词，每三分之一添加br？
以太使用小盒子或br标签
你能发布你当前的html吗？里面的文字是什么？ div/p/tr?它周围是什么？您需要在一个页面中放置一定数量的这些吗？

标签： javascript jquery css twitter-bootstrap word-wrap

【解决方案1】：

我开发了一个有点working solution - 它并不完美，但它会找到中间空间并在那里分裂。话虽如此，更好的解决方案可能涉及总字符数以找到最接近 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);
}

已知问题

这只是拆分一次。它依赖于将字符串分成两半，而不是多次。
如果字符集中度不均匀，字符串将不会被完美分割。它只计算空格，不计入总字符数。例如，如果您有以下句子“他是一个搞笑的喜剧演员”，那么最中心空间两侧的字符差异是巨大的。

【讨论】：

【解决方案2】：

你可能有这样的文字：

Photo camera Nikon 3600, brand new.

如果使用任何一种“机器平衡包装”，都会导致同样的问题。

因此，唯一合理的选择是将文本拆分为具有语义意义的块。并适当地设计它们。

例如：

p {width:10em; border:1px solid; }
span.product { display:inline-block; background: yellow;}

<p>Brand new photo camera <span class="product">Nikon 3600</span></p>
<p>Photo camera <span class="product">Nikon 3600</span>, brand new.</p>

display:inline-block; 将导致将该片段作为一个整体包装。

【讨论】：