在每行文本的开头和结尾添加填充 [英] Add padding at the beginning and end of each line of text

问题描述

我有一个跨越多行并且有背景颜色的跨度。我需要每一行有一个10px填充在结束。文本将是动态的，所以我需要一个css或js解决方案，而不是只是黑客它的标签（这是我得到的例子如下图所示）

图片展示我和我想要的区别：

 < h3>< span class =heading> CREATIVE TALENT的下一代< / span>< br / 
< span class =subhead>在这里是< / span>< / h3> 
 
 h3 {
 margin：0; 
 font-size：42px;} 
 h3 .heading {
 background-color：＃000; 
 color：＃00a3d0;} 
 h3 .subhead {
 background-color：＃00a3d0; 
 color：＃000;} 
  

我想不出有什么办法与css，我正在考虑使用javascript来查找每行的开始和结束，并添加一个不间断的空间。

有没有人有任何想法如何实现？
Cheers

解决方案

我已经在IE8测试了这个（在IE7看起来不太好） Chrome，Firefox，Opera，Safari。

$ b b

它有点蠢，说实话，可能比它更有价值 - 一个基于JS的解决方案肯定会更容易理解。

有

  #titleContainer {
 width：520px 
} 
 h3 {
 margin：0; 
 font-size：42px; 
 font-weight：bold; 
 font-family：sans-serif 
} 
 h3 .heading {
 background-color：＃000; 
 color：＃00a3d0; 
} 
 h3 .subhead {
 background-color：＃00a3d0; 
 color：＃000; 
} 
 
 div {
 line-height：1.1; 
 padding：1px 0; 
 border-left：30px solid＃000; 
 display：inline-block; 
} 
 h3 {
 background-color：＃000; 
 color：#fff; 
 display：inline; 
 margin：0; 
 padding：0 
} 
 h3 .indent {
 position：relative; 
 left：-15px; 
} 
 h3 .subhead {
 padding：0 15px; 
 float：left; 
 margin：3px 0 0 -29px; 
 outline：1px solid＃00a3d0; 
 line-height：1.15 
} 
  

HTML：

 < div id =titleContainer> 
< h3>< span class =indent> 
 
< span class =heading>下一代的创意TALENT的创作< / span>< br />< span class =subhead< / span> ; 
 
< / span>< / h3> 
< / div> 
 
<！ -  [if IE]>< style> 
 h3 .subhead {
 margin-left：-14px 
} 
< / style><！[endif]  - > 
  

I've got a span which goes over a number of lines and has a background colour. I need each of the lines to have a 10px padding at the end. The text will be dynamic so i need a css or js solution rather than just hacking it with nbsp tags (which is how I got the example pictured below)

The picture show the difference between what I have and what i want:

<h3><span class="heading">THE NEXT GENERATION OF CREATIVE TALENT</span><br/>
<span class="subhead">IT'S RIGHT HERE</span></h3>

h3 {
    margin:0;
    font-size: 42px;}
h3 .heading {
    background-color: #000;
    color: #00a3d0;}
h3 .subhead {
    background-color: #00a3d0;
    color: #000;}

I can't think of any way to do this with css, I was considering using javascript to find the beginning and end of each line and adding a non-breaking space.

Does anyone have any ideas of how to achieve this? Cheers

解决方案

I've tested this in IE8 (doesn't look too bad in IE7) and recent versions of Chrome, Firefox, Opera, Safari.

Live Demo

Screenshot from Chrome:

It got a bit silly and, to be honest, probably more complicated than it's worth - a JS based solution would definitely be easier to understand.

There are so many gotchas with this technique.

CSS:

#titleContainer {
    width: 520px
}
h3 {
    margin:0;
    font-size: 42px;
    font-weight: bold;
    font-family: sans-serif
}
h3 .heading {
    background-color: #000;
    color: #00a3d0;
}
h3 .subhead {
    background-color: #00a3d0;
    color: #000;
}

div { 
    line-height: 1.1; 
    padding: 1px 0;
    border-left: 30px solid #000; 
    display: inline-block; 
}
h3 { 
    background-color: #000; 
    color: #fff; 
    display: inline; 
    margin: 0; 
    padding: 0
} 
h3 .indent { 
    position: relative; 
    left: -15px;
}
h3 .subhead {
    padding: 0 15px;
    float: left;
    margin: 3px 0 0 -29px;
    outline: 1px solid #00a3d0;
    line-height: 1.15
}

HTML:

<div id="titleContainer">
    <h3><span class="indent">

        <span class="heading">THE NEXT GENERATION OF CREATIVE TALENT</span><br /><span class="subhead">IT'S RIGHT HERE</span>

    </span></h3>
</div>

<!--[if IE]><style>
h3 .subhead {
    margin-left: -14px
}
</style><![endif]-->

这篇关于在每行文本的开头和结尾添加填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！