javascript - jQuery を使用して、長すぎるヘッダーにブレークを追加します

Question

jquery を使用して、1 つの親 div 内のすべての h3 タグを確認したいと考えています。1 つまたは複数の場合があります。各ヘッダーをチェックして、スペースを含めて 35 文字以下であることを確認する必要があります。<br>もしそうなら、35番目の文字の後に（70番目、105番目なども）入れなければなりません。

ヘッダーを作成しているスクリプトに永続的な変更を加えるまで、これは簡単で汚い修正です。どんな助けでも大歓迎です。

Answer 1

代わりに CSS を使用し、35 文字には 35ex を使用します。

http://jsfiddle.net/EPft9/

div.parent h3 {
    max-width: 35ex; //Which should give you 35 characters.
}

Answer 2

アプローチ 1: (部分文字列なし)

各ヘッダー内で div をラップし、css を使用して div 幅を強制的にラップすることができます。

デモ: http://jsfiddle.net/2c4J6/2/

JS:

$('h3').wrapInner('<div class="limitHeader" />');

CSS:

.limitHeader {
    width: 360px; /* Update as your font-style*/
    word-wrap: break-word;
}

アプローチ 2: (部分文字列を使用)

アプローチ 1 は、各文字の幅が異なるため、信頼できない場合があります。したがって、本当に正確に 35 文字にしたい場合は、以下のような単純な反復を試してください。

デモ: http://jsfiddle.net/2c4J6/

$('h3').html(function(idx, v) {
    if (v.length > 35) {
        var result = '';
        for (var i = 0; i < (v.length / 35); i++) {
           result += v.substr(35*i, 35) + '<br/>';
        }
        return result;
    }
    return v;
});

Answer 3

より良い解決策は、プレーンなJavascriptを使用することです。

function fixHeader(el) {
var elements = el.getElementsBYTagName("h3");

    for (x in elements) {
        fixHtml(elements[x]);
    }
}

function fixHtml(el) {
var html = "",
    j = 0;

    for (var i = 0; i < el.innerHTML.length; i++) {
        html += el.innerHTML[i];

        if (j > 35) {
            html += "<br />";
            j = 0;
        }

        j++;
    }
}

この関数は、fixHeader（yourElement）を呼び出すことで使用できます。

もちろん、より良い解決策はCSSです。幅のある内部要素を作成するだけです。

<div>
    <div style="width:100px;">My superduper long text which is absolutely to long and definitly needs breaks.</div>
</div>

幅を広げることで文字数を調整できます。

あなたが本当にjQueryを使いたいのなら...：

$(el).find("h3").each(function() {
    var html = $(this).html(),
    j = 0,
    new_html = "";

    for (var i = 0; i < html.length; i++) {
        new_html += html[i];

        if (j > 35) {
            new_html += html[i];
            j = 0;
        }

        j++;
    }

    $(this).html(new_html);
});