1

jQueryを使用して、テキストの長さに関係なく3行にテキストを保持する方法を見つける必要があります。（または私が推測するjavascript）

したがって、このテキスト：

First Project Name Combined with First Location

次のように表示するためにブレークが挿入されています。

First Project Name
Combined with
First Location

このテキストの間：

Second Project Name Combined with Second Location And Text To Make This Text Area Even More Incredibly Extra Long

次のように表示するためにブレークが挿入されています。

Third Project Name Combined with Third
Location And Text To Make This Text Area
Even More Incredibly Extra Extra Long

コードには、文字またはスペースの数を数え、3で割ってから、割った長さに比べて非常に多くのスペースの後にブレークを挿入することが含まれると思います。ただし、これをコードで記述する方法はよくわかりません。

使用している実際のコードを使用してjsFiddleを設定しています。コードは、コードの最初のビットでうまく機能する必要があります。（これは素晴らしいstackoverflowユーザーによってすでに丁寧に解決されました）

何か案は？

4

2 に答える 2

1 
var text = 'Text to split in lines',
    lines = [],
    chunks, i;

text = text.split(' ');
chunks = Math.ceil(text.length / 3);

for ( i = 0; i < 3; i++) {
    lines.push( text.slice(i * chunks , chunks * i + chunks ).join(' ') );
}

これがフィドルです：http：//jsfiddle.net/sCRvm/

そしてここにあなたはプラグイン形式でそれを持っています：

(function($) {
    $.fn.splitToLines = function(numberOfLines) {
        return this.each(function() {

            var $this = $(this),
                lines = [],
                text, chunks, i;

            text = $this.text().split(' ');

            chunks = Math.ceil(text.length / numberOfLines);

            for ( i = 0; i < numberOfLines; i++) {
                lines.push( text.slice(i * chunks , chunks * i + chunks ).join(' ') );
            }

            $this.html( lines.join('<br />') );

        });
    };
}(jQuery));

このスクリプトを含めると、次のように呼び出すことができます。

$('div').splitToLines(3);

これがフィドルです：http：//jsfiddle.net/BguKx/1/

于 2012-07-31T15:48:04.953 に答える
0

注：これには、提案したアプローチよりも優れたアプローチがある可能性があります。ある場合、私はそれを知りませんが、私はあなたの提案されたアプローチを達成するための方法としてこれを投稿していますが、必ずしも問題を解決するための最良の方法としてではありません。

文字列がに格納されていることを前提としていますstr。

var len = str.length; // total length of the string
var breakpoint = len/3; // caching a third of it
var bp1 = -1; // location of the first <br>
var bp2 = -1; // location of the second <br>
for ( var i = 0; i < len; ++i ) // going through the entire string
{
    if ( str[i] == ' ' ) // might be a good idea to check for any whitespace character
    {
        if ( bp1 < 0 || Math.abs(breakpoint - i) < Math.abs(breakpoint - bp1) )
        { // either the first time through, or a better location for the first <br> than the previous best
            bp1 = i;
        }
        else if ( bp2 < 0 || Math.abs((bp1+breakpoint) - i) < Math.abs((bp1+breakpoint) - bp2) )
        { // either the first time after getting the first <br>, or a better location for the second <br>
            bp2 = i;
        }
    }
}
if ( bp1 > 0 && bp2 > 0 ) // found places
{
    str = str.substring(0, bp1) + '<br>' + str.substring(bp1+1, bp2) + '<br>' + str.substring(bp2+1);
}
else
{
    // didn't work; put some error checking code here?
}
于 2012-07-31T15:46:23.277 に答える