0

http://screencast.com/t/bbziM2OGe8に示されているように、視覚的な外観を実現しようとしています。ご覧のとおり、要素に適用される色は、コンテナー全体ではなく、テキストのみに適用する必要があります。要素はインラインですが、複数の行があるため、背景は最も長い行と同じ幅のビジュアル ブロックに適用されます。

テキストは動的であるため、個別のインライン要素に分割できないため、最後の行が 1 行のインライン要素になります。

テキストメトリックを取得し、動的コンテンツを個別の要素に分割できるJavaScriptソリューションを探しています。たとえば、スパン、各行の折り返し、合計の高さ、行の高さの取得、行数の計算、何らかの方法でのテキストの分割などです。行数と要素を作成します。私が最もよくわからない部分は、各行に表示されている単語を取得する方法です。

とにかく、そのようなスクリプトがなくても、あなたの考えや提案を私に知らせてください。私は自分でスクリプトを作成しようとします.

ご協力ありがとうございました。

4

1 に答える 1

0

各文字の幅が同じであるテキスト形式の長い文字列が与えられた場合、テキストを別々の行に正しく分割する問題は簡単です。フォント幅が表示されている文字に依存すると仮定すると、処理するすべての印刷可能な文字を調べ、その文字の幅を計算するスクリプトを作成することをお勧めします。次に、このデータを次のように呼び出すことができるオブジェクトとして保存します。

charLen[character] = length

次に、の線に沿って何かを書きます

breakText = function(str) {
    var lines = [], maxSize = $('#element').width();

    while( str !== '') { 
        var len = 0, lineText = '';

        while( len <= maxSize ) {
            len += charLen[str.charAt(0)];
            lineText += str.charAt(0);
            str = str.substr(1);
        }

        lines.push(lineText);

    }

    return lines;
}
于 2012-10-06T16:25:00.473 に答える