将多行文本边框作为更多文本中的块

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

我也一直试图这样做。这就像我到目前为止一样接近：

＆＃13;

＆＃13;

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;
}

  

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我会尝试改进这一点，只是想把它留在这里供别人看。