Question

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

Fidddle

Answer 1

删除所有br代码并使用display: table。

.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 spans中：

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

Answer 4

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

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

当保证金以百分比表示时，该百分比取自父节点的宽度，因此100％表示与父节点一样宽，这导致下一个元素被“推”到新行。

Answer 5

我认为花车可能在这里最适合你，如果你不想让元素占据整行，那么浮动它应该有用。

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

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

Answer 6

我认为，截至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>

Answer 7

如果您没有使用<p>（仅<div>和<span>），那么此解决方案甚至可以让您调整inline-block中心或者对，如果你想（或者只是保留它们，就像你最初要求的那样）。虽然该解决方案可能仍适用于<p>，但我认为生成的HTML代码不会完全正确，但无论如何都取决于您。

诀窍是将<span>的每一个用相应的<div>包裹起来。这样我们就可以利用<div>的{{1}}（默认）引起的换行，同时仍然保持视觉绿框紧贴文本的极限（使用{{1}声明）。

display: block

display: inline-block

Answer 8

您可以尝试：

    display: inline-table;

对我而言，它运作良好。

使用inline-block打破一个新行？

8 个答案: