包裹文字

Question

我正在开发一个网络应用程序，我正在寻找一种方法来显示一个文本块周围的彩色背景，但在文本包装到2行或更多行的情况下，我只希望背景扩展为任何文本行中最远的，而不是容器的边缘，这似乎是默认行为。

Fiddle说明了问题以及我正在寻找的问题。

以下是简化问题：

<div class="outerContainer">
 <div style="background:blue">
  wrapped and workingasdesired
 </div>
</div>

我想要一种方式来显示这个

*wrapped and      *      |  
*workingasdesired *      |

其中|表示外部容器的边缘，*将是突出显示的区域

然而，实际发生的事情是突出显示一直延伸到外部容器的末尾：

*wrapped and            *|  
*notworkingasdesired    *|

我在Stack Overflow上搜索过，并且还玩了很长一段时间，但没有运气。

仅限CSS的解决方案将是圣杯，但有关使用JS实现此目标的好方法的建议也会很棒！

Answer 1

也许这不完全是您想要的，但您可以尝试使用内部inline-block中的div找到解决方案，如下所示：

.outerContainer {
    width:180px;
    background-color: red;
}
.outerContainer div{
    display:inline-block;
    background-color: blue;
}

显示它的小提琴：Fiddle

希望它有所帮助。