打破内联块的新路线？

我想删除<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

Answer 1

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

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

Answer 2

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

Answer 3

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

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

并添加到您的HTML跨度类：

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

Answer 4

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

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

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

Answer 5

如果你没有使用<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>