0

CSSで、ドキュメントの余白に記号を配置して、ドキュメントのテキスト本文内の特別なフレーズの位置を強調表示/示す方法を探しています。エラーを含む行の横の余白に小さな警告アイコンを配置する、プログラミングIDEの通常のテキストエディタについて考えてみてください。

これは、ドキュメントが折り返されていない1行で構成されている場合に簡単に実行できます。次に、行にシンボルが必要かどうかを確認して、手動で配置できます。

ただし、たとえば、ブラウザが自動的に行を分割するドキュメントにスペルミスのアイコンを配置したい場合は注意が必要です。次に、スペルミスがどの行に終わったかを把握する方法が必要になります。これは、スペルミスを示すラッパースパンのy座標をチェックすることで、JSでも可能ですが、探しています。よりエレガントなもの。

たとえば、このマーカーシンボルをエラーをマークするスパンに配置し、スパンの境界内ではなくドキュメントの左マージンに配置できるようにする、フロート左または絶対配置のトリックはありますか？ ？

4

3 に答える 3

3

実際、答えはあなたが説明した通りです。テキストをスパンでラップし、スパン内にアイコン要素を含めます。次に、それを左にフロートさせ、それに負のマージンを設定します。例：

CSS：

.icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: blue;
  float: left;
  margin-left: -15px;
  margin-top: 5px;
}

マークアップ：

<span class="selected"><span class="icon"></span>this is some text in a span. </span>

実例： http： //jsfiddle.net/FQCsn/

于 2013-01-14T17:33:19.330 に答える
1

position: absolute疑似要素のコンテキストでのアプリケーションもあると思います:before。これを試して、探しているものが得られるかどうかを確認してください。

<html>
<head>
<title>Lorem Ipsum</title>
<style>
.allowLeftMargin
    {
        margin-left: 5em;
    }
.highlightThis
    {
        background-color: yellow;
    }
.highlightThis:before
    {
        background-color: yellow;
        content: "Note";
        padding-left: 0.25em;
        padding-right: 0.25em;
        position: absolute;
        left: 1em;
    }
</style>
</head>
<body>
<div class="allowLeftMargin">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur.
    <span class="highlightThis">Excepteur sint occaecat</span>
    cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.</p>
</div>
</body>
</html>

ブラウザウィンドウのサイズをすばやく調整して、メモが強調表示されたスパンで移動することを確認できます。

于 2013-01-14T17:48:04.427 に答える
0

あなたができることは、スペルエラーの周りに強いものを置き、そのスペルエラーの直後に別のタグ（たとえばスパン）を追加し、そのスパンを位置に設定することです：絶対ですが、「top」プロパティはありません（トップ位置は変数）。そのスパンの幅を100％に設定して、線を「選択」し、そのスパン内に別のタグ（便宜上aiタグ）を追加し、それを使用してアイコンを配置します。

p{ line-height:20px; margin:20px;}
strong{ color:red;}
span{ display:block; height:20px; left:0; position:absolute; width:100%;}
i{ background:red; display:block; height:12px; left:0; position:absolute;
top:-16px; width:12px;}

例： http： //jsfiddle.net/fwZqv/1/

「結果」ウィンドウの幅を変更して、その動作を確認してください。

これは完璧な解決策ではありません。私はむしろJSを使用したいと思います。

于 2013-01-14T17:40:10.357 に答える