2012-02-22 7 views
1

私は非常に長い段落を持っているとしましょう。私が行をクリックすると、JS/jQueryはこの特定の行の先頭に空の<span>タグを追加します。この行の最初の単語の直前です。JavaScriptを使用した段落内の単語の行番号を見つける

f.e:これは私の段落です:私は2番目の行をクリックすると

<p> 
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has. 
</p> 

<span>タグは、2行目の最初の単語の前に挿入されます。

どのようにすればいいですか?

+0

したがって、コンテナ要素によって適用された折り返しによって決定される線はありますか? –

+1

ハード改行( '
')を使用しない限り、私はあなたがそれを行うことはできないと思います。 –

答えて

2

jQueryは、ハードコードされた改行(<br />など)が発生しない限り、折り返し行がどこで発生するかを検出できません。

しかし、それはちょっとハッキリですが、1つのオプションがあります。

  1. .lastIndexOf(' ')を使用して)一度に一つの単語を削除し、対策
  2. (つまりはそれを0高さを与えるのでdisplay:noneを使用せずに、それを不可視にする)コンテナ
  3. はそれを-3000leftを与える重複毎回高さ.substring(0, position) + '<span>' + .substring(position)
+0

良いアイデア、ありがとう。 しかし、パフォーマンスについてはどうですか?私が段落の各単語を渡す必要がある場合、段落は非常に長くなることがあると考えてください。ユーザーが発射したときに重くなる可能性があります。 – dsternlicht

+0

@fastrd最初に 'p'の' .length'を比較すると、それが変更された場合 - それが再実行に意味がない場合。また、パラの正面から新しいパラに単語を入れ、いつ成長するかを見ることができます(新しいラインを示す)。そうすれば、あなたは一番最初の線を越えることができます。オリジナルを複製し、その内容を空白にして画面外に送信し、オリジナルのパラから単語を追加します。 – Joe

1

こんにちは!あなたが見つけることができます - それは最小の非ゼロ高さにリサイズした場合、あなたがそうそして、あなたの<span>を挿入する場所、それはあなただけ見つけた位置に

  • .substring() ...です可能性は、以下のリンクでここに、これはあなたの問題を解決し

    Get caret position in contentEditable div

    希望を複製します。