使用 inline-block 换行？答案

【问题标题】：Breaking to a new line with inline-block?使用 inline-block 换行？
【发布时间】：2013-01-27 17:15:24
【问题描述】：

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

【问题讨论】：

X-Ref: CSS to line break before/after a particular inline-block item
=ARRAYFORMULA(UNIQUE(TEXT(INDIRECT("A1:A"&COUNTA(A1:A)), "mmm-yyyy"))) - i.stack.imgur.com/lvbzL.png
@player0 谢谢老兄

标签： css

【解决方案1】：

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

【讨论】：

因为 inline-block 不会让 OP 实现他想要的，float:left 仍然执行他使用 inline-block 的操作（使元素包裹文本而不是全宽）。我本可以让 display: inline-block but float: left 也无形地将 display 设置为 block，更简洁的代码总比杂乱无章好。我想你不知道这一点，你决定投反对票的原因。毕竟，我的答案是一个可能的正确答案（我确信还有其他方法可以实现），并且不适合谷歌索引......
要显示的任何浮动集：块。这就是为什么我认为当被问及 inline-block 时在这里使用 float 会产生误导。反对票是，在搜索它时，它得到了很高的排名，但是没有帮助。我认为我之前的评论确实解释了这一点。抱歉，如果不清楚。
@hakre - 这不太正确。由于它们不再与父级处于同一流中，因此块宽度会像 display:inline-block 一样折叠，这实际上是 OP 想要的。这对我来说效果很好，解决了同样的问题。
@Luca 可能还值得指出的是，您可能需要对跨度的父级进行 clearfix，例如 .text { clear: left; overflow: auto; }。

【解决方案2】：

我认为浮动在这里可能最适合您，如果您不希望元素占据整行，则将其向左浮动应该可以。

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

注意：在使用它之前删除<br/>。

【讨论】：

【解决方案3】：

删除所有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> 的右侧看到伪边距。无论如何，这和表格是一样的，但是表格还有一个额外的好处，那就是总是按照其内容的宽度形成。

【讨论】：

我认为这个答案比公认的答案更相关。 display: table 通过与它所包含的内容一样宽来充当 inline-block 元素，但也可以通过在元素之前 AND 之后添加换行符来充当块元素。浮点数不会在元素后添加换行符。
还可以添加border-collapse:separate;有填充工作
display: table; 的行为超出了可能会破坏某些 CSS 的换行符。我知道height 和width 不起作用
这个答案将受益于更多的解释。
@PaulRooney 刚刚在他的问题中添加了解释。

【解决方案4】：

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

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

并将该类添加到您的 html 跨度中：

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

【讨论】：

需要调整 line-height 以克服一些 padding 重叠......但做得很好
不错的答案。这是在我的具体情况下唯一对我有用的答案。
这是最好的答案，因为它不会破坏内联跨度的任何样式（如边框底部）

【解决方案5】：

如果您可以不使用<p>s（仅<div>s 和<span>s），如果您愿意，此解决方案甚至可以让您将inline-blocks 居中或右对齐（或者只是按照您最初要求的方式将它们留在左边）。虽然该解决方案可能仍适用于 <p>s，但我认为生成的 HTML 代码不会完全正确，但无论如何这取决于你。

诀窍是用相应的<div> 包装您的每个<span>s。通过这种方式，我们利用了由<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>

【讨论】：

【解决方案6】：

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

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

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

【讨论】：

不是答案的一部分，但我认为一些解释是合适的。我想设置<pre> 块的样式，使它们具有边框，仅与内容一样宽，但不比父节点宽，并且每个都出现在新行上。由于各种原因（如果有人感兴趣，我可以详细说明），早期的解决方案对我来说都不是令人满意的，所以我想出了自己的解决方案。父节点宽度有限且overflow: visible时看起来不错；否则可能会导致不必要的水平滚动条或空白空间。

【解决方案7】：

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

【讨论】：

最适合我。我需要将项目左对齐、居中或右对齐。所以，我可以使用align-items: flex-start、align-items: center 和align-items: flex-end。