我正在寻找创建下图所示的效果:
文本后面的黑色背景交错,而不是在字符串换行时创建一个黑框。这可以通过动态字符串上的 CSS 来实现吗?
这实际上是内联元素的默认行为,例如 span。下面的代码应该有这个效果。
<span style="background-color: black; color: white">EYES ON<br/>FILM</span>
请注意,这<br/>
是为了说明目的,如果文本被浏览器包装,它也可以工作。如果您需要为 div 执行此操作,请确保在display: inline
其上设置样式。
这是你如何做到的。基本思想是将每个单词包装在一个单独的 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>
这些方面的东西?
<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 test </span>
</div>
这会在定义的宽度处自动中断。使用 %nbsp; 在文本之后获得额外的空间。
它可以将文本放在 a<span>
内<p>
,或者使用 Teletype 文本元素 ( <tt>
) 或<code>
标签。
<tt>
在 HTML5 中不被接受。
示例 jsfiddle:http: //jsfiddle.net/gmDWP/