0

我正在寻找一种在 CSS 中将符号放入文档边缘的方法，以突出显示/指示文档文本正文中某些特殊短语的位置。想想编程 IDE 中常见的文本编辑器，它们会在包含错误的行旁边的空白处放置小的警告图标。

如果文档由未换行的单行组成，这很容易做到。然后我可以检查该行是否需要该符号并手动放置它。

但是，例如，如果我想在浏览器自动换行的文档中放置一个拼写错误图标，那就很棘手了。然后我必须有办法找出拼写错误最终出现在哪一行。通过检查标记拼写错误的一些包装跨度的 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

您可以做的是在拼写错误周围加上一个强项，在该拼写错误之后添加另一个标签（例如跨度），并将该跨度设置为位置：绝对，但没有“顶部”属性（因为顶部位置是多变的）。将该跨度设置为 width: 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 回答