1

序幕

我有一个看起来有点像这样的布局： 在此处输入图像描述

这是在"JSFiddle"上。

它所涉及的 DIV 如下所示，并显示在一行文本下方：

<div class="container">
    <div>
        <span class="offset" style="width: 150px">&nbsp;</span>
        <span class="myText">First: Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
    </div>
    <div>
        <span class="offset" style="width: 500px">&nbsp;</span>
        <span class="myText">Second: Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
    </div>
    <div>
        <span class="offset" style="width: 50px">&nbsp;</span>
        <span class="myText">Third: Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
    </div>
    <div>
        <span class="offset" style="width: 233px">&nbsp;</span>
        <span class="myText">Fourth: Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
   </div>
</div>

主意

使用读取错误范围突出显示上述文本中的错误。错误跨度的放置方式使其左上角指向文本中出现错误的字符位置。我在实际错误跨度（红色）前面使用跨度（黄色）将错误跨度向右移动正确的量。（这不是一个好方法，我将在下面解释原因，以防您感兴趣并且我愿意接受建议，但这不是当前的问题）

这样，我能够使跨度从左侧的特定位置开始，但如果没有足够的空间，则环绕并继续在行的开头。如果没有足够的空间（由于偏移）即使是一个单词，整个跨度也会移动到下一行。这是我想要的行为。

问题

当跨度由于右侧空间不足而完全移动到下一行时，它们左上角的“尖”角不再正确。在这种情况下，我想让跨度周围有圆角。但我找不到办法做到这一点。我想避免使用 Javascript/jquery，因为它看起来像很多繁琐的计算，每当调整包含窗口甚至 div 的大小时，我都必须重新计算它。

到目前为止尝试过

我主要看的是 CSS 伪元素:first-line，因为它听起来像是我想要的。但是规范说该:first-line元素必须是选择器列表中的最后一个选择器。我试过了，确实

div:first-line .myText {
    # apply some layout
}

不起作用。

也没有

.myText:first-line {
    # apply some layout
}

因为 :first-line元素只能附加到块容器元素上。

如果我将 .myText 作为一个inline-block元素，它会起作用，但这会导致它提前换行（如果它不完全适合第一行）。display:block只是使早期包装变得更糟（直接从下一行开始）。

我不能只是选择div:first-line，因为

  1. :first-line 不允许设置边框。
  2. 即使这样做了，它也会修改 :first-line 块元素周围的边框，这不会改变它内部 span 的边框。

任何想法如果跨度在 div 的第二行中，我如何使跨度的左上角变为圆形，而无需编写大量 Javascript 代码试图找出跨度是否已完全移动到下一行并注册一个调整监听器大小以每次重新计算它？

为什么使用偏移跨度而不是margin-left:200pxor position:relative; left:200px？

两者都导致容器 div 增长，我不能拥有它。此布局嵌入在滚动视图中，很像 JSFiddle 上的预览。尝试将span 设置.offset为display:none和.myTextspan 的margin-left 设置为较大的值（例如500 像素），然后调整JSFiddle 预览的大小，直到所有行都环绕到下一行（span 的第一个单词除外）。第一个单词将始终位于第一行，因此导致容器 div 比其他情况下更大。在我的情况下，容器 div 甚至不会调整大小，这会导致文本被截断。

因此，我在前面使用另一个跨度，具有自定义宽度（由 Javascript/jquery 根据错误的位置确定）。这样，如果第一行没有足够的空间，则完整的跨度可以换行到下一行（在这种情况下，它从行的开头开始，正如您在以“第二”开头的跨度中看到的那样）。

语境

它是 Adob​​e Brackets的扩展，我在其中使用 CodeMirror 编辑器的 addLineWidget() 方法向 div 注入错误消息。因此，任何使用 Brackets/CodeMirror API 来解决问题的方法都可以。

4

0 回答 0