Question

我的跨度超过了许多行并且具有背景颜色。我需要每条线在末尾都有10px的填充。文本将是动态的，所以我需要一个css或js解决方案，而不仅仅是使用nbsp标签进行黑客攻击（这就是我如何得到下面的例子）

图片显示了我拥有的和我想要的东西之间的区别： padding difference

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

我想不出用css做任何方法，我正在考虑使用javascript来查找每一行的开头和结尾，并添加一个不间断的空格。

有没有人对如何实现这一点有任何想法？干杯

Answer 1

我已经在IE8中测试了这一点（在IE7中看起来不太糟糕）以及最新版本的Chrome，Firefox，Opera，Safari。

Live Demo

Chrome屏幕截图：

Chrome

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

使用这种技术有很多陷阱。

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

Answer 2

box-shadow让它变得简单！

box-shadow:0.5em 0 0 #000,-0.5em 0 0 #000;
-moz-box-shadow:0.5em 0 0 #000,-0.5em 0 0 #000;
-webkit-box-shadow:0.5em 0 0 #000,-0.5em 0 0 #000;

Answer 3

这是一个解决方案，要求每个单词都包含在一个额外的SPAN元素中：

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

然后你可以像这样单独设置单词的样式：

h3 span {
    display: inline-block;
}
h3 > span > span {
    padding: 0 0.25em;
    margin: 0 -0.25em 0 0;
}
h3 .heading span {
    background-color: #000;
    color: #00a3d0;
}
h3 .subhead span {
    background-color: #00a3d0;
    color: #000;
}

Answer 4

你可以这样做。将其包裹在<p>内并将border-left =设置为您想要设置为范围的填充。关于正确填充，我认为没有使用JS会有解决方案。顺便说一句，我还在寻找其他类型的技巧

http://www.jsfiddle.net/steweb/cYZPK/

从您的markup / css http://www.jsfiddle.net/steweb/cYZPK/1/

开始更新

编辑

EDIT2 （使用JS..mootools）http://www.jsfiddle.net/steweb/Nn9Px/（刚刚在firefox上测试过...需要在其他浏览器上进行测试..解释asap :)）

Answer 5

为什么不将padding-right:10px;添加到容器中？

Answer 6

即使不是100％遵循您的设计理念，我认为如果您想坚持使用CSS，这是唯一的解决方案。

h3 span {
  /* cross browser inline-block */
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;

  padding:0 10px;
}

inline-block属性将使您的元素根据其内容大小进行扩展，因此它的行为类似于内联元素，但也具有允许您应用填充的块属性。

希望有所帮助

Answer 7

这是一种没有额外标记的方法 - 尽管它确实需要图像。 http://codepen.io/DeptofJeffAyer/pen/FiyIb

Answer 8

我强烈推荐使用Split Lines JS：https://github.com/jeremyharris/split_lines

标签的问题在于它从头到尾包含“内联”含义。因此，如果您有一个固定宽度并且您的跨度自动进入第二行，那么该行文本将用第一行包装并共享跨度。要解决这个问题，您需要分别跨越每行文本。例如：

<span>line one</span>
<span>line two</span>

如果您希望单独跨越的文本是从Wordpress或类似文件自动生成的，那么这不是一个简单的选择...要解决这个问题，请使用上面的JQuery脚本。

〜

绕过它的另一种方法（虽然可能不太理想）是简单地添加display：block;对你跨越css类：

span { display: block; background-color: #333; color: #fff; }

这将跨越整个块，类似于按钮。

希望这有帮助。

在每行文本的开头和结尾添加填充

8 个答案: