2

「フロート」が行うことを実行しようとしていますが、コピーには選択できません。これは、これがどのように使用されるかの例です:

<p>
Lorem ipsum dolor sit amet, In a mollis est. Cras vel tortor in purus mattis 
venenatis.
<span style="width: 5em; border: 1px solid black; float: right"> What does "venenatis" means? this is a margin notes! </span>
Vivamus aliquam erat eget leo molestie egestas. Cras diam sapien. Proin in urna nec est vulputate commodo non vitae nunc. Praesent feugiat suscipit dolor et aliquet. Etiam semper lacus id nisi vehicula posuere. Vivamus aliquam erat eget leo molestie egestas. Cras diam sapien. Proin in urna nec est vulputate commodo non vitae nunc. Praesent feugiat suscipit dolor et aliquet. Etiam semper lacus id nisi vehicula posuere.
</p>

これにより、関連テキストのすぐ右にあるボックスのような「付箋」が作成されます。コピーするテキストを選択すると、メモもコピーされ、テキスト フローが壊れます。

これを修正する方法はありますか？

4

4 に答える 4

1

より簡単なソリューション

私が考えることができる最善の方法は、テキストの別のビューを提供することです。これは、ポストイット ボックスを表示しない、印刷に適したバージョンです。ポストイットのコンテンツがテキスト フロー内にある限り、この問題は発生します。

可能性 (より難しい) 代替案

より難しい代替手段として、javascript ルートに進むことができます。本文に空の DIV を挿入し、幅と高さを設定してから、その同じ場所にポストイットを絶対配置で配置する必要があります。

<div id="container" style="position:relative;">
  <div class="text">Duis non lorem vel diam adipiscing dignissim. 
    Nulla vel varius erat. Nulla facilisi. Vivamus pulvinar pretium dignissim. 
    Aliquam sed tortor posuere nunc bibendum mattis. Integer bibendum, elit ut 
    vestibulum tristique, dolor justo scelerisque nibh, ac blandit metus arcu 
    non nibh.In ac eros sed nisl porta bibendum quis in mauris. Quisque 

    <div style="float:right; margin:10px; width:100px; height:100px;"></div>

    pellentesque ligula eu sapien commodo at mollis purus feugiat. Vivamus 
    volutpat dictum magna eu venenatis. Suspendisse dignissim enim aliquet leo 
    imperdiet vitae accumsan mauris blandit. Donec tempus velit aliquet magna 
    imperdiet euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Vestibulum mollis tortor pellentesque velit pharetra non lobortis est 
    aliquam.
</div>
<div class="post-it">
  I am the post-it. I should be placed absolutely so that 
  I overlap the div that is presently sitting within the body of text. This 
  will give the impression that I too exist within there, but I won't be 
  selectable.
</div>
</div>

空の div の幅/高さをポストイットの幅/高さと一致するように動的に決定することは、javascript を使用して非常に簡単に行うことができます。jQuery を使用した例を次に示します。

var realWidth = $("#container > .post-it").width();
var realHeight = $("#container > .post-it").height();

$("div.text div:eq(0)").css({"width":realWidth,"height":realHeight});

次に、空の div の x および y オフセットを取得し、それをポストイット div の左と上の値として適用して、指定された領域のテキストの真上に配置します。

于 2009-09-05T04:35:17.327 に答える
0

簡潔な答え？いいえ。

長い答え？ブラウザーには、選択したすべてのコンテンツが含まれます。選択されないようにする方法は、ドキュメント内の別の場所に配置して、選択されないようにすることです。次に、たとえば絶対配置を使用して配置します。これは確かに便利ではありません。ドキュメント内のコンテンツの配置のため、これは「float: right」の例では機能しません。

何をするにしても、Javascript を使用してコピー/貼り付けなどを停止しようとする道をたどらないでください。ユーザーに迷惑をかける無意味な方法です。

于 2009-09-05T04:35:52.953 に答える
0

上記の2つの答えを組み合わせると、印刷テキストのような脚注セクションを作成して（DOMの観点から）コンテンツの下に配置するのが非常に複雑な方法の1つになる可能性がありますが、各脚注領域は次のようなIDを持つスパンを取得しますfootnoted-1脚注領域は のような対応する ID を取得しfootnote-1ます。次に、すべての脚注を取得し、コンテンツの領域に相対的な位置を与える jquery のような優れた js フレームワークを使用します。

ただし、簡単なメモ: サイトでこのようなこと (それほど派手ではありませんが同じ原則) を試していたところ、別の問題がすぐに明らかになりました。マージン ノートが対応する段落よりも長い場合もあれば、1 つの段落に複数のノートが含まれる場合もあります。物がすぐに混み合い、スタイリングが役に立たなくなります。

私はこのスタイルのサイトのファンではありませんが、サイド マージンのアイデアを捨てることを検討して、他のサイトが採用している手法を使用することを検討することをお勧めします。つまり、別のスタイル (点線の下線または強調された背景) でテキストに注目し、ユーザーは次のことができます。テキストの上にマウスを置くとメモが表示されます。

于 2009-09-05T04:46:54.540 に答える
0

私が知っているすべてのブラウザーは、ドラッグを開始してドラッグを停止するカーソル位置の下の要素間のソース内のすべてのテキスト コンテンツを選択します。また、表示位置に関係なく、ソースと同じ順序でクリップボードに表示されます。ユーザーに手がかりを与えるためにも、右のフローティング コンテンツは、ソース内の前にあるコンテンツの前に表示されることはありません。

個別に選択するには、テキスト コンテンツを論理的に順序付け、ネストしないようにする必要があります。浮動スパンを段落の先頭に配置すると、段落テキストを選択すると、必要に応じて機能します。おおよそのCSSトリックを使用するか、この回答で説明されている構造的なハックと組み合わせたjsを使用しない限り、間にメモを入れずに複数の段落を選択することはできません。これはまったくお勧めしません。

于 2009-09-05T10:44:43.097 に答える