打破内联块的新路线?

我想删除<br /> ,并通过CSS做断行。 如果我改变跨度来display:block的宽度将达到100%,我需要的宽度正是文本的长度,就像现在一样。 有什么build议么?

 <div class="fullscreen"> <p class="text"> <span class="medium">We</span> <br /> <span class="large">build</span> <br /> <span class="medium">the</span> <br /> <span class="large">Internet</span> </p> </div> .text span { background:rgba(165, 220, 79, 0.8); display:inline-block; padding:7px 10px; color:white; } .fullscreen .large { font-size:80px } 

Fidddle

删除所有br标签并使用下面的样式。

 .text span { background:rgba(165, 220, 79, 0.8); display:table; padding:7px 10px; color:white; } .fullscreen .large { font-size:80px } 

使用float: left;clear: left;

http://jsfiddle.net/rtM6J/

 .text span { background: rgba(165, 220, 79, 0.8); float: left; clear: left; padding: 7px 10px; color: #fff; } 

将项目设置为display: inline和使用:after

 .text span { display: inline } .break-after:after { content: '\A'; white-space:pre; } 

并添加到您的HTML跨度类:

 <span class="medium break-after">We</span> 

我认为花车可能在这里最适合你,如果你不想要这个元素占据整条线,那么漂浮它就应该工作。

 .text span { background:rgba(165, 220, 79, 0.8); float: left; clear: left; padding:7px 10px; color:white; } 

注意:在使用这个课程之前删除<br/>这个。

如果你没有使用<p> s(只有<div> s和<span> s),那么这个解决scheme甚至可以让你alignment你的inline-block的中心或者右边,如果你想他们离开了,你原来的要求)。 虽然解决scheme可能仍然与<p> s一起工作,但我并不认为所产生的HTML代码是完全正确的 ,但无论如何,这取决于您。

诀窍是用相应的<div>包装每个<span> <div> 。 这样,我们就可以利用由<div>display: block (默认)引起的换行符,同时仍然保持视觉绿色框的紧密度(使用display: inline-block声明) 。

 .text span { background:rgba(165, 220, 79, 0.8); display:inline-block; padding:7px 10px; color:white; } .large { font-size:80px } 
 <div class="text"> <div><span class="medium">We</span></div> <div><span class="large">build</span></div> <div><span class="medium">the</span></div> <div><span class="large">Internet</span></div> </div>