为文本添加背景色，但段落各行之间留有空白 [英] Add a background color to text, but with space blank space between lines of paragraph

问题描述

我想知道CSS是否可以做点什么.基本上，我想使用html/css在图像的RHS上重新创建文本，但是目前我正在获取图像的LHS.

I was wondering if something was possible to do in CSS. Basically i want to recreate the text on the RHS of the image using html/css, but currently I'm getting the LHS of the image.

HTML:

<div id="banner">
    <div id="text">
        <p>This is an example of what I have</p>
    </div>
</div>

CSS:

div#banner { background: green; width:300px; height:300px;}
div#text {  margin: 20px auto; }
div#text p {  background:#fff; padding: 5px; margin: 5px; font-size: 2em; }

现在，我意识到可以通过以下方式完成此操作:

Now I realise that this can be done already either by:

1. 使用图片
2. 使用单独的p标签

(按第2点，我的意思是:

(By Point 2 I mean:

<div id="banner">
    <div id="text">
        <p>This is an</p>
        <p>example of</p>
        <p>what I have</p>
    </div>
</div>

)

但是我真正想知道的是，是否真的可以仅使用css和单个p标签来完成图像的RHS?

But what I would really like to know is if it's actually possible to do what is on the RHS of the image, using only css and a single p tag?

替代文字http://chris.carrotmedialtd.com/example.jpg

推荐答案

您可以使用以下方法实现所需的效果:

You can achieve your desired effect by using:

• display:inline; 强制p上的背景样式应用于文本，而不是p上的块，并且
• 行高:2.2em (略大于您的字体大小)以强制文本之间的行

• display: inline; to force the background styling on the p to apply to the text, rather than the block on the p, and
• line-height: 2.2em (slightly more than your font size) to force lines between your text

像这样:

div#text p {
    display: inline;
    background: #fff;
    padding: 5px;
    margin: 5px;
    font-size: 2em;
    line-height: 2.2em;
}

这篇关于为文本添加背景色，但段落各行之间留有空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！