相关疑难解决方法(0)

我正在尝试使用换行符创建突出显示的文本效果.

例:

我无法弄清楚如何在文本中添加填充.这是包含文本的span元素的CSS:

background: none repeat scroll 0 0 #1B1615;
display: inline;
font-size: 15px;
line-height: 24px;
padding-left: 5px;

添加填充时,它只在文本开头和结尾添加填充,如下所示:

CSS:

background: none repeat scroll 0 0 #1B1615;
display: inline;
font-size: 15px;
line-height: 3em;
padding: 10px;

有没有人知道如何实现这一目标？

我有一个我想要实现的设计,涉及标题文本以其自己的背景颜色出现,填充10px,在图像上,例如:

http://i.stack.imgur.com/E7EpS.png

这张图中的第一个例子效果很好,很简单:

.greenbox {width:520px; height:261px; position:relative;}
.greenbox span { padding:0 10px; background:#000; position:absolute; left:0; bottom:40px; }

当文本溢出到另一行时出现麻烦,然后span元素填充不会影响换行符上的文本,它呈现如下:

http://i.stack.imgur.com/pY18f.png

任何人都知道一个替代品,或者他们如何设置这个设计,以便背景颜色和填充是一致的？

提前致谢

编辑:我已经简化了代码,使其简洁,但错过了一个重要的部分.实际上它是这样的:

.greenbox {width:520px; height:261px; position:relative;}
.greenbox a {position:absolute; left:0; bottom:40px; }
.greenbox span { padding:0 10px; background:#000; }

用html作为:

<div class="greenbox">

    <a href="link"><span>The Title Goes Here</span></a>

</div>

因此,跨度保持内联,包裹在绝对位置锚中.

我在使用 css 设置行高 + 文本背景样式时遇到问题。

<style>
.wrap  {
    width: 70%; 
    line-height:0.9;
}
.hl {

        background-color: orange;
}
</style>
<div class="wrap">
       <span class="hl">
          Some content will go here which will be split into several lines depending of resolution (depending on width of wraper)
       </span>
</div>

我有动态文本，根据浏览器宽度换行到多行此文本的行高小于“正常”。当我将背景颜色应用于文本时，此背景会与降序字母的底部重叠：g,p,y,q,j

似乎文本在浏览器中呈现，使得文本的第二行/下行（及其背景颜色）位于第一行/上行文本的前面，因此第二行的背景位于降序字母的前面到行高。

每一行都有一个新的背景，因为我们正在谈论一个内联元素。我当然需要使用内联元素来获取文本背景。我需要用css或者JS解决这个问题，不改变文本的文本行高。

附加信息：我在这里找到了一个很好的答案： 在每行文本的开头和结尾添加填充

由三十点回答（问题正下方的接受答案），但是如果您查看他的现场演示解决方案，并将那里的 line-height 更改为较小的值，您将遇到与我相同的问题。 演示

我有一个span元素,里面有一些文字.我希望文本具有纯色背景颜色以及使用相同数量的填充开始/结束每一行.

这个jsfiddle显示了这个问题:http: //jsfiddle.net/VwsQg/

我发现了这个非常相似的问题:在每行文本的开头和结尾添加填充,但我也需要在每一行之间留出一些空格.

这张图片说明了我想要完成的结果:

先感谢您.

我得到了一个与这个小提琴相关的CSS问题:http ://jsfiddle.net/r584e/
这里有相关的截图

有时我必须以这种方式设置内联元素的样式,试图几乎避免行之间的空间并仅在文本下应用背景.如您所见,第一段内部有一个链接,我在其中设置line-height: 1em.右边的段落改为a line-height: 0.8em;.(注意:我知道这样我可以粗略地剪切一些字母 - 比如q,g,p,......但是文字是大写的,所以这不是一个真正的问题)

在第二段中,行实际上更接近(如我所愿)但不幸的是每一行也与前一行部分重叠(除非你删除了应用的背景颜色)并且这不好(例如,请参阅底部的"大写"字样) ,所以这里我的问题:

1. 如何让行更接近(如右边的段落),而不会相互重叠并定义背景颜色(无论应用它的元素,但它必须保留在文本下面,而不是填充整个块)
2. 可选地,有一种方法可以为每行文本添加水平填充？

随意更改CSS和/或标记.我正在寻找一个纯CSS的解决方法.
最佳解决方案应该适用于现代浏览器,如果可能的话,至少应该使用IE8 +

先感谢您.=)

编辑:
关于第二个问题,使用@thirtydot解决方案我可以使用white-space: pre-wrapspan元素上的应用添加空间(右侧)

由于div的固定宽度,我在一个div中有一个H1超过1行.我想仅将背景颜色设置为H1文本,以便背景仅保留在文本后面(例如,如果行的末尾有空白空间,则不应使用背景颜色).

另外,我需要设置左右填充文本.我试图将填充设置为标题但它也不起作用.

这是我想要得到的:

我试图通过设置inlineH1 的显示和设置背景颜色来实现这一点,但它似乎不起作用.以下是我的HTML和CSS以及演示.

HTML:

<div class="box">
    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget massa felis, at aliquam libero. </h1>

CSS:

.box{
    background: green;
    overflow: hidden;
    max-width: 100px;
    margin: 50px auto;
    padding: 20px;
}

h1{   
    background: yellow;
    font-size: 30px;   
    float: left;
    display: inline;   
}

演示:http://jsfiddle.net/BQMXa/