それぞれに等しい量の2つの行にテキストを折り返す方法は？

Question

私はWebサイト上にアイテムボックスを作成しています（問題の場合はCodeIgniter、Bootstrap、jQueryが含まれています）。通常、タイトルはボックス自体よりも長くなっています。私は複数の行になるようにボックス内のテキストをラッピングしています。問題は、それがまだ場合によっては醜く見えるということです。たとえば、テキスト「ブランドの新しい写真カメラニコン3600は、」そのような何かにラップ：

Brand new photo camera Nikon 
3600 

、代わりに私はそれがより均一各行でこのようなことがしたいと思います：

Brand new photo 
camera Nikon 3600 

I教育的な推測を行い、特定の場所で改行を挿入することができますが、より良い方法があるはずです。主にCSSソリューションを探していますが、JavaScript/jQueryは動作する限り歓迎します。ありがとう！

Answer 1

私は幾分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); 

---

を持っていたされていることを、私たちはそこにあるどのように多くのスペースを見つける必要があり...今、私たちはXのスペースがあることを知って、中間ほとんどが行うことによって発見された

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

...

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); 
} 

---

既知の問題

• ます。それは、文字列を複数回ではなく、半分に分割するだけです。
• 文字の濃度がやや均一でない場合、文字列は完全に分割されません。 の範囲はで、の合計文字はです。たとえば、「彼は陽気なコメディアンです」という文章があった場合、中央のスペースの両側にある文字の違いは広大です。

Answer 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;は、その断片が、全体としてラップされるようになります。