Question

我正在尝试创建一种将背景颜色应用于标题文本的样式。这很简单，在我的标题中包含一个内联元素，但是当有一个换行时会出现问题，因为左边的填充仅应用于第一行文本。为了解决这个问题，我将一个左边框应用于我的标题标记，它在换行期间正确维护左边距。但是，我遇到了严重的问题，使左边框高度与浏览器中的内联元素背景相匹配。我把它与Chrome / Safari相匹配，并且它已经在Firefox等中出现了。我已经创建了一个小提琴来演示：

http://jsfiddle.net/spidercoder/4KJn2/1/

我的方法是：

HTML：

<h1><span>Lorem ipsum dolor sit amet consectetur adipiscing elit.</span></h1>

CSS：

h1{
color: white;
text-transform: uppercase;
font-family: sans-serif;
font-size: 34px;
line-height: 44px;
border-left: 10px solid black;
padding: 8px 0 7px 0;} // This tweaks the height of the left-border

h1 span{
white-space: pre-wrap;
background: black;
padding: 10px 10px 10px 0;}

我尝试了几种不同的方法，但遗憾的是没有任何方法可行。这似乎是一个相当简单的效果，但我无法在浏览器中正确匹配边框的高度和跨度背景，这会破坏效果。

有没有人对如何解决此问题有任何想法，以便它适用于各种浏览器？不需要左边框的方法可能是最好的，因此我们不必匹配元素高度。

感谢您的任何建议！

Answer 1

添加到span：

box-shadow: 10px 0 0 black, -10px 0 0 black;

或者只是：

box-shadow: -10px 0 0 black;

在这里找到它后自己使用：

http://css-tricks.com/multi-line-padded-text/

还有很多其他方法可以在那里列出。

Answer 2

问题是span溢出h1一个像素左右。一个简单的方法是添加：

overflow: hidden;

到h1样式。

Answer 3

jsFiddle上的演示。

HTML

<div class="padded-multiline">
    <h1><span>Lorem ipsum dolor sit amet consectetur adipiscing elit.</span></h1>
</div>

CSS

.padded-multiline {
    line-height: 1.3; 
    padding: 2px 0; 
    border-left: 20px solid #000;
    width: 400px;
    margin: 20px auto;
}
.padded-multiline h1 { 
    background-color: #000;
    padding: 4px 0 5px;
    color: #fff; 
    display: inline;
    margin: 0; 
}
.padded-multiline h1 span { 
    position: relative;
    left: -10px; 
}

Answer 4

使用margin-left而不是border-left。

h1 {
  font-size: 3em;
  line-height: 1em;
  margin-left: 15px;
}

h1 span {
    background: rgb(241,241,241);
    box-shadow: 15px 0 0 rgb(241,241,241), -15px 0 0 rgb(241,241,241);
  }

我做了一个演示http://jsfiddle.net/pa8J8/

在文本的背景颜色，在线包裹维护左填充

4 个答案: