最终代码

Question

我在网站上创建项目框（CodeIgniter，Bootstrap，如果重要的话包括jQuery），标题通常比框本身长。我将文本包装在盒子里面，这样它就可以进行多行了。问题是在某些情况下它看起来仍然很丑陋。例如，文字＆＃34;全新照相机尼康3600＆＃34;包装到类似的东西：

Brand new photo camera Nikon
3600

而我希望它在每一行都更加均匀：

Brand new photo
camera Nikon 3600

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

Answer 1

我已经开发了一些working solution - 它并不完美，但它会找到中间空间并在那里分开。话虽这么说，一个更好的解决方案可能涉及总字符数，以找到最接近 true 中心的空间，甚至可能获得整行的宽度并设置字符串＆＃39; s容器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);

但是我们如何在字符串中找到中间空间的WHERE？这是我从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);
}

已知问题

这只是分裂。它依赖于将字符串分成两半而不是多次。
如果字符浓度不均匀，则字符串不会完美分割。它只计算空格并且不计入总字符数。例如，如果你有以下句子＆＃34;他是一个搞笑的喜剧演员＆＃34;，中心最大空间两边的人物差异很大。

Answer 2

你可能有这样的文字：

Photo camera Nikon 3600, brand new.

如果使用任何类型的机器平衡包裹，将导致同样的问题＆＃34;。

所以唯一合理的选择是将文本拆分为语义上有意义的块。并适当地塑造它们。

例如：

＆＃13;

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

＆＃13;

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

＆＃13;

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

如何在每行上等量的两行上包装文本？

2 个答案:

最终代码

我们如何到达那里

已知问题