如何处理多行内联文本的非矩形部分？

Question

你如何得到一个漂亮的大纲？这类似于以下问题：

CSS/Javascript: How to draw minimal border around an inline element?

然而，该问题的公认解决方案会产生锯齿状的文本框，如下所示： http://jsfiddle.net/z9THQ/2/

/* p {
    text-align: justify;
} */
.wrapped {
   outline: 2px solid black;
   box-shadow: 0px 0px 0px 2px rgba(0,0,0,1);
}

.wrapped span {
    border: 1px solid white;
    background-color: white;
    position: relative;
    z-index: 1000;
}

即使有正确的文字，右边缘仍然是锯齿状的;它应该看起来像一条线，如下图所示。

纯CSS解决方案是理想的，但如果Javascript是必要的，那也没关系。

解决方案理想情况下解决的相关症状是：hover属性未被两行文本之间的区域激活。理想情况下，整个部分应该感觉像一个文本区域，只有它是非矩形的，因为它与其他文本内联。