CSS更改跨度的边框样式，具体取决于它是否位于其父块元素的第一个LINE中

Question

序言

我有一个看起来像这样的布局：

此处位于"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>

观

使用读取错误范围突出显示上述文本中的错误。错误跨度的放置方式是它们的左上角指向出现错误的文本中的字符位置。我在实际错误跨度（红色）前面使用跨度（黄色）将错误跨度向右移动正确的量。 （这不是一个好方法，我会在下面解释为什么你感兴趣并且我可以接受推荐，但这不是当前的问题）

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

问题

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

到目前为止已经尝试了

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

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

不起作用。

也没有

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

自：first-line元素can only be attached to block container elements。

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

我无法选择div:first-line，因为

1. :first-line doesn't allow to set the border。
2. 即使这样做，它也会修改：第一行块元素周围的边框，它不会改变其中跨度的边界。

如果在div的第二行中没有编写大量的Javascript代码试图找出跨度是否已移至完全下一行并注册一个调整大小的侦听器，以便每次都重新计算它？

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

两者都导致容器div增长，我无法做到这一点。此布局嵌入在滚动视图中，就像JSFiddle上的预览一样。尝试将.offset范围设置为display:none，将.myText范围的边距设置为大（例如500px），然后调整JSFiddle预览直到所有线都包围到下一行（除了跨度的第一个单词）。第一个单词将始终位于第一行，从而导致容器div大于其他情况。在我的情况下，容器div甚至没有调整大小，导致文本被切断。

因此，我在前面使用另一个span，具有自定义宽度（由Javascript / jquery决定，具体取决于错误的位置）。这样，如果第一行没有足够的空间，则完整的跨度可以包裹到下一行（在这种情况下，它从行的开头开始，正如您在＆＃34开始的跨度中看到的那样;第二个＆＃34 ;）

上下文

它是Adobe Brackets的扩展名，我使用其中的CodeMirror编辑器的addLineWidget（）方法为div注入错误消息。因此，任何使用Brackets / CodeMirror API来解决问题的方法都可以。