使用CSS将单行文本分成单独的框

Question

是否可以运行包含在单个标签中的单行文本，然后以背景颜色输出它，分成多个包裹在框中的行，这些框是半透明的，彼此重叠？

我在JSFiddle >here<中有一个演示。

<div class="wrap">
    <p><b>Live a good life. If there are gods and they are just,</b>
    </p>
    <p><b>then they will not care how devout you have been,</b>
    </p>
    <p><b>but will welcome you based on the virtues you have lived by.</b>
    </p>
    <p><b>~Marcus Aurelius</b>
    </p>
</div>

我希望在外观方面实现目标，但 不 我想要在标记方面实现的目标。

我需要部分地将这一行划分为重叠的单独框：

<blockquote class="blue-tape">Live a good life. If there are gods and they are just, 
then they will not care how devout you have been, 
but will welcome you based on the virtues you have lived by. 
Now how do I split these into boxed lines? ~Marcus Aurelius</blockquote>

这仍然是 CSS3工作，还是我们现在需要使用JQuery？

（所有这些的CSS）

.wrap {
    width:100%;
    text-align:center;
}
p {
    display:block;
}
b {
    display:inline-block;
    background-color: rgba(78, 145, 220, 0.5);
    color: #55349E;
    font-weight:100;
    padding:10px 1% 18px;
    margin:-10px auto;
    white-space:pre-wrap;
    text-align:center;
}
.blue-tape {
    text-align: center;
    font-weight: 100;
    font-size: 14px;
    color: #fff;
    display: block;
    background-color: rgba(78, 145, 220, 0.5);
    line-height: 1.6677547em;
    width:80%;
    margin: 0 auto;
    white-space: pre-wrap;
}

Answer 1

您可以使用具有背景颜色和额外行高的跨度来实现所需效果：（Fiddle）

CSS

span {
    background-color: rgba(78, 145, 220, 0.5);
    line-height:180%;
    padding:.5em 0em;
}

HTML

<span>Live a good life. If there are gods and they are just, then they will not care how devout you have been, but will welcome you based on the virtues you have lived by. Now how do I split these into boxed lines?</span>

变为：