将多行文本作为更多文本中的块嵌入

Question

我试图在段落内的多行文本中设置边框。我基本上不希望边界出现在每一行上，而是围绕着所有行。

我意识到我可以将所有的文本包装在一个div中，但是它会阻止该段落其余部分的文本。

我想要一个流体段落和多行上的一个句子有一个顶部边框，边线的长度和底部边框，以及该边框结束在句子结尾和之前下一句开始。

像这样：

Answer 1

你可以给一个尝试覆瓦状排列2个内元素

• 直列家长：给一个outline

• 直列孩子：给position，一个background和最终一个box-shadow填补间隙线2之间（如果有的话）

b { 
 
    outline:solid red; 
 
} 
 
span { 
 
    position:relative; 
 
    background:white;box-shadow:0 0 0 1px white; 
 
}

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, <b><span>tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.</span></b> Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

如果你想两边直线，给出一个尝试text-align：

p { 
 
text-align:justify 
 
} 
 
b { 
 
    outline:solid red; 
 
} 
 
span { 
 
    position:relative; 
 
    background:white;box-shadow:0 0 0 1px white; 
 
}

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, <b><span>tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.</span></b> Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

这里是一个可玩的笔：http://codepen.io/gc-nomade/pen/dWPGXv

Answer 2

我一直在试图做到这一点。因为我目前得到这是接近：

div{ 
 
    font:500 12px/14px arial; 
 
} 
 
p{ 
 
    display:inline; 
 
    background:#ff0000; 
 
    padding:0 1px; 
 
} 
 
.whitepad{ 
 
    background:#ffffff; 
 
    vertical-align:top; 
 
    border:1px solid #ffffff; 
 
    padding:1px 0 0; 
 
    margin:0 -1px; 
 
} 
 
.redpad{ 
 
    position:relative; 
 
    top:1px; 
 
    left:1px; 
 
    background:#ffffff; 
 
    margin:0px 3px 0px 1px; 
 
    border-bottom:1px solid #ff0000; 
 
} 
 

 

<div> 
 
    <p> 
 
    <span class="whitepad">This is some text that's not outlined</span><span class="redpad">and this is some text that is totally outlined in red like you want. Seek and thou shalt find. Listen and thou shalt hear. I don't know I'm making up text. It needs to be super long text in order to accomplish the thing for testing. Even longer than this. it needs to keep getting longer. Okay that's good. Total props to me </span><span class="whitepad">and then this is again not outlined</span> 
 
    </p> 
 
</div>

我会努力改进这一点，只是想离开这里给别人看的。