18

HTML / CSSでタイポグラフィを使用する場合の一般的な問題は、スウェーデン語で「horunge」（英語では「widow」）と呼ばれるものです。

それは何ですか：

幅が200pxで、「タイプミスが大好きです」というテキストのボックスがあるとします。これで、テキストが壊れて次のようになります。


タイポグラフィが大好きです

デザイナーとして、私は単語のろくでなし（単一の単語/行）を望んでいません。これがドキュメント/PDFなどの場合、私は前に単語を壊して、次のようになります。


タイポグラフィが大好きです

これははるかに良く見えます。

CSSルールまたはJavaScriptでこれを解決できますか？ルールは、単語が一列に空にならないようにすることです。

追加することで解決できることはわかっていますが<br />、動的な幅、フィードコンテンツ、さまざまな翻訳、ブラウザのフォントレンダリングの問題などで機能する解決策ではありません。

更新（解決策） このjqueryプラグインで問題を解決しました：http：//matthewlein.com/widowfix/

4

6 に答える 6

7

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

そのような：

<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, "&nbsp;") )
});

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

于 2014-02-11T21:23:48.117 に答える
2

とても参考になったので、このページに追加したかっただけです。

あなたが（未亡人）を持っている場合、未亡人は次のページに着陸する単一の単語であり、新しい行の単一の単語ではないため、実際には孤児である必要があります。

「N12 5GG」のような郵便番号を扱うと、完全な郵便番号が新しい行にまとめられますが、孤立したものとして分類されるため、回避策は次のとおりです。(両方のバージョンを使用できるようにクラスを「noWidow2」に変更しました。

123 Some_road、Some_town、N12 5GG

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

これにより、最後の 3 つの空白が一緒に新しい行に配置され、郵便番号の問題が機能します。

最終結果

123 Some_road,
Some_town, N12 5GG
于 2014-12-07T16:09:42.520 に答える
0

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

ブラウザのサポートについてよくわかりません...

編集：WebKitの実装の詳細については、https ：//bugs.webkit.org/buglist.cgi？quicksearch=orphansを参照してください。

于 2011-09-16T13:07:07.493 に答える
0 

$('span').each(function() {
  var w = this.textContent.split(" ");
  if (w.length > 1) {
    w[w.length - 2] += "&nbsp;" + 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>

于 2015-02-08T22:44:00.060 に答える
0

この関数を使用して、行の高さを見つける小さなスクリプト hereを作成しました。

これは単なるアプローチであり、機能する場合と機能しない場合があり、徹底的にテストする時間がありませんでした。

現在のところ、text_elementjQuery オブジェクトである必要があります。

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でテストしたところ、問題なく動作するようでした。

とにかく便利になると思うので、フィードバックを聞いて改善したいと思います。

ただそれで遊んでください！:)

于 2011-09-16T13:56:14.037 に答える
0

手動で、間のスペースを次のように置き換えることができます&nbsp;

動的に追加する方法を探していました。いくつか見つけましたが、自分で機能させることができませんでした。

于 2012-05-23T19:02:10.527 に答える