用inline-block换行吗？

我想删除<br />并通过CSS进行换行。如果我将跨度更改为display:block宽度，则宽度将为100％，并且我需要宽度像现在一样准确地是文本的长度。有什么建议？

<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 }

混蛋

删除所有br标签并使用display: table。

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

说明：该表默认情况下包装其内容的宽度，而不设置宽度，但是仍然是块级元素。您可以通过将宽度设置为其他块级元素来获得相同的行为：

<span style="display:block;border:1px solid red;width:100px;">Like a default table.</span>
<code>null</code>

请注意，该<code>元素不会<span>像通常那样内联地流动。使用开发工具中的计算样式进行检查。您会在的右侧看到伪边距<span>。无论如何，这与表相同，但是表具有始终按其内容的宽度形成表格的额外好处。

使用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 spans中：

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

这是另一个解决方案（仅列出了相关的声明）：

.text span {
   display:inline-block;
   margin-right:100%;
}

当用百分比表示边距时，该百分比取自父节点的宽度，因此100％表示与父节点一样宽，这将导致下一个元素“推送”到新行。

我认为，截至2018年，做到这一点的最佳方法是使用flexbox。

.text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* same as original below */
.text span {
   background:rgba(165, 220, 79, 0.8);
   display:inline-block;
   padding:7px 10px;
   color:white;
}
.fullscreen .large {  font-size:80px }

<div class="fullscreen">
    <p class="text">
        <span class="medium">We</span> 
        <span class="large">build</span> 
        <span class="medium">the</span> 
        <span class="large">Internet</span>
    </p>
</div>

我认为浮点数在这里可能对您最有效，如果您不希望该元素占据整条线，则将其左移的浮点数应该会起作用。

.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）可以，则该解决方案甚至可以让您将inline-blocks的中心或右边对齐（如果您愿意）（或者只是按照最初的要求保留它们的左边）。尽管该解决方案可能仍可与一起使用<p>，但我认为生成的HTML代码并不十分正确，但还是由您自己决定。

诀窍是<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>

您可以尝试：

    display: inline-table;

对我来说，它工作正常。