widgetsを避けるためのJavaScript

Question

HTML/CSSのタイポグラフィーで作業するときのよくある問題は、スウェーデン語で「horunge」と呼ばれるものです（「widow」英語）。

概要：

のは、あなたが「私は非常に多くのtypograpyを愛する」200pxの幅とし、テキストボックスであるとしましょう。今すぐテキストの区切りと次のようになります。

私はワード野郎（単一の単語/行）をしたくないデザイナーとして非常に
くらい

をタイポグラフィを愛します。これは、文書/ PDFなどだった場合、私は非常に前に言葉を破ると、次のようになります。

私はタイポグラフィ
を愛するあまり

ずっと良く見える

。

私はこれをCSSルールまたはJavaScriptで解決できますか？このルールは、単語を空にしないようにしなければなりません。

は、私はそれが<br />を追加することによって解決することができます知っているが、それはダイナミックな幅、フィードコンテンツ、異なる翻訳、私は解決 ブラウザのフォントレンダリングの問題など

アップデート（溶液）で機能するソリューションではありませんこのjqueryプラグインの私の問題：http://matthewlein.com/widowfix/

Answer 1

CSSの未亡人と孤児のプロパティもあります：about.com articleを参照してください。

ないブラウザのサポートについてはよく分から...

編集：ここではWebKitの実装についての詳細は：https://bugs.webkit.org/buglist.cgi?quicksearch=orphans。

Answer 2

私は少しscript hereを作って、this functionの助けを借りて、行の高さを見つけました。

これは単なるアプローチであり、うまく動作しないかもしれませんし、完全にテストする時間がありませんでした。

今のところ、text_elementはjQueryオブジェクトである必要があります。

function avoidBastardWord(text_element) 
{ 
    var string = text_element.text(); 
    var parent = text_element.parent(); 
    var parent_width = parent.width(); 
    var parent_height = parent.height(); 

    // determine how many lines the text is split into 
    var lines = parent_height/getLineHeight(text_element.parent()[0]); 

    // if the text element width is less than the parent width, 
    // there may be a widow 
    if (text_element.width() < parent_width) 
    { 
     // find the last word of the entire text 
     var last_word = text_element.text().split(' ').pop(); 

     // remove it from our text, creating a temporary string 
     var temp_string = string.substring(0, string.length - last_word.length - 1); 

     // set the new one-word-less text string into our element 
     text_element.text(temp_string); 

     // check lines again with this new text with one word less 
     var new_lines = parent.height()/getLineHeight(text_element.parent()[0]); 

     // if now there are less lines, it means that word was a widow 
     if (new_lines != lines) 
     { 
      // separate each word 
      temp_string = string.split(' '); 

      // put a space before the second word from the last 
      // (the one before the widow word) 
      temp_string[ temp_string.length - 2 ] = '<br>' + temp_string[ temp_string.length - 2 ] ; 

      // recreate the string again 
      temp_string = temp_string.join(' '); 

      // our element html becomes the string 
      text_element.html(temp_string); 
     } 
     else 
     { 
      // put back the original text into the element 
      text_element.text(string); 
     } 

    } 

} 

さまざまなブラウザのフォント設定が異なります。違いを見るためにちょっと試してみてください。私はIE8とOperaでそれをテストし、毎回文字列を変更しましたが、うまくいきました。

私はそれがとにかく便利かもしれないと思うので、私はいくつかのフィードバックを聞いて改善したいと思います。

ちょうどそれと遊ぶ！ :)

Answer 3

手動で、あなたは私が動的にそれを追加する方法を探してきた 

との間にスペースを置き換えることができます。私はいくつかを見つけましたが、それを自分で機能させることができませんでした。

Answer 4

気になるテキストを含む要素のタグに "noWidows"クラスを追加すると、単純なjQuery/regrexソリューションは次のようになります。

のような：

<p class="noWidows">This is a very important body of text.</p> 

してから、このスクリプトを使用します。

$('.noWidows').each(function(i,d){ 
    $(d).html($(d).text().replace(/\s(?=[^\s]*$)/g, " ")) 
}); 

これが見つけ、非改行文字と文字列の最後のスペースを置き換えるために正規表現を使用しています。つまり、最後の2つの単語が同じ行に強制されます。これは、行の終わりにスペースがあると、テキストが固定幅の要素の外側で動く可能性があるため、または固定されていない場合は要素が大きくなる可能性があるため、良い解決策です。

Answer 5

このページに追加するだけで、多くの助けになりました。

もしあなたが（ウィーンズ）を抱えているのなら、ウィーンズは実際には孤児でなければなりません。

「N12 5GG」のようなポストコードを使用すると、完全な郵便番号が新しい行にまとめられますが、それでも孤児として分類されるため、回避することができます。 （あなたは両方のバージョンを使用できるように「noWidow2」クラスを変更しました。

123 Some_road、Some_town、N12 5GG

が

$('.noWidows2').each(function(i,d){ 
    var value=" " 
    $(d).html($(d).text().replace(/\s(?=[^\s]*$)/g, value).replace(/\s(?=[^\s]*$)/g, value)); 
}); 

これはなります一緒になって新しいライン上にある最後の3個の空白です郵便番号の発行作業。

最終結果

123 Some_road, 
Some_town, N12 5GG 

Answer 6

$('span').each(function() { 
 
    var w = this.textContent.split(" "); 
 
    if (w.length > 1) { 
 
    w[w.length - 2] += " " + w[w.length - 1]; 
 
    w.pop(); 
 
    this.innerHTML = (w.join(" ")); 
 
    } 
 
});

#foo { 
 
    width: 124px; 
 
    border: 1px solid #ccc; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="foo"> 
 
    <span class="orphan">hello there I am a string really really long, I wonder how many lines I have</span> 
 
</div>