在包裹文本后的交错的颜色

Question

我希望创建下图中显示的效果：

文本背后的黑色背景错开，而不是在字符串换行时创建黑盒子。这可以通过动态字符串上的CSS来实现吗？

Answer 1

这实际上是内联元素的默认行为，例如span。 以下代码应具有此效果。

<span style="background-color: black; color: white">EYES ON<br/>FILM</span>

请注意，<br/>用于说明目的，如果文本被浏览器包装，它也会起作用。 如果您需要为div执行此操作，请确保在其上设置display: inline样式。

Answer 2

Here就是这样做的。基本思路是将每个单词包装在一个单独的div中，并将这些div嵌套在另一个div中，其宽度包含内联div。

<style>
    .foo {
      display: inline;
      background-color: #000;
      color: #fff;
      margin: 0;
    }

    .wrapper {
      width: 100px;
    }
</style>
<div class="wrapper">
<div class="foo">Here </div><div class="foo">is </div><div class="foo">some </div><div class="foo">text </div><div class="foo">exciting </div><div class="foo">isn't </div><div class="foo">it </div>
 </div>

Answer 3

这些方面的东西？

http://jsfiddle.net/wxDa7/

<style>
    #a 
    { 
        width:50px; 
        font-size:20px; 
        line-height: 90%; 
        text-transform:uppercase; 
    }
    #a .b 
    {
         background-color:black; 
         color:white;  
    } 
</style>
<div id="a">
      <span class="b">Test&nbsp; test&nbsp;</span>
</div>

此自动裁剪以指定的宽度显示。使用％nbsp;在文本之后获得额外的空间。

Answer 4

它可以将文本放在<span>内<p>内，或使用电传文字元素（<tt>）或<code>标记。

HTML5中不接受

<tt> 。

示例jsfiddle： http://jsfiddle.net/gmDWP/