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

Is it possible to run a single line of text wrapped in a single tag, and then output it with a background colour, breaks into multiple lines encased in a box, and these boxes are translucent that overlapped each other?

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

I have a demo in JSFiddle >here<.

我在JSFiddle>这里有一个演示<。

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

That up there is what I wanted to accomplish in terms of looks, but it is not what I wanted to accomplish in terms of markup.

这就是我想要在外观方面实现的目标，但这并不是我想要在标记方面实现的目标。

I needed partcularly this line to break into seperate boxes that overlap:

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

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

Is this still a CSS3 job, or do we need to use JQuery now?

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

(CSS for all of it)

（所有的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;
}

1 个解决方案

#1

You can use a span with a background color and extra line-height, to achieve the desired effect: (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>

Becomes:

变为：