css - 交错的颜色环绕文本

Question

我正在寻找创建下图所示的效果：

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

Answer 1

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

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

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

Answer 2

这是你如何做到的。基本思想是将每个单词包装在一个单独的 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

它可以将文本放在 a<span>内<p>，或者使用 Teletype 文本元素 ( <tt>) 或<code>标签。

<tt>在 HTML5 中不被接受。

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