將多行文本作爲更多文本中的塊嵌入

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>

我會努力改進這一點，只是想離開這裏給別人看的。