0

長い wordwrap 要素で、一番左上に表示されている単語を検出する方法はありますか?

各単語または一連の単語の周りにスパンを使用することは、テキストが長すぎて動的にロードされてパフォーマンスが向上するため、実際には良いオプションではありませんが、これは他に何も表示されないと考えるかもしれません.

サンプルコード（ http://jsfiddle.net/8utcp/2/で遊んでください）：

<style> #test { height: 100px; width: 150px; overflow: auto; } </style>

<div id=test> with lots of text </div>

<script> $("#test").scrollTop(50); // simulate user scroll </script>

これで、テスト div に次のようになります。

ワードラップでスクロールされたテキスト

最初に表示される単語が「Adpicing」であることを確認するにはどうすればよいですか?

回答は任意のフレームワークを使用できます。javascript または css に基づいている必要があります。すべてのブラウザーで機能しないソリューションであっても、良い出発点になる可能性があるため、歓迎します。この問題については何も見つかりません。

より明確にします。長いテキストがあり、ブラウザで開いて下にスクロールし、後で別のデバイスで別の画面サイズで開いたり、同じブラウザで 10 倍以上ズームして開いたりするとします。最初に表示される単語が常に一致することを保証するプロパティ/ロジックはどれですか。<

4

1 に答える 1

1

簡単に言えば、いいえ、単語の位置を取得することはできません。長い答えは、やりたいことはできるが、それはハッキーだということです。

私が考えることができるのはこれです：

  • 空白に基づいて分割
  • 単語トークンをウォークし、たとえば、単語の前後に絶対位置を指定してスパン要素を挿入します。innerHTMLを元に戻しwordsArray.join(" <span></span>")て、スペース/単語を測定可能にするか、代わりにすべての単語をスパンでラップすることもできます。
  • 親からスパンのオフセットを取得できるようになり、各単語の大まかな座標が得られます
  • スクロールに基づいて、最初に表示される可能性が高いものを見つけます。
  • スパンを取り除きます。
于 2012-05-22T11:56:18.827 に答える