CSS 使用内联块换行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14831866/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Breaking to a new line with inline-block?
提问by ditto
I want to remove the <br />'s and do the break lines through CSS. If I change the spans to display:blockthe width will go 100% and I need the width to be exactly the length of the text, like it is now. Any suggestions?
我想删除<br />'s 并通过 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 }
回答by Devang Rathod
Remove all brtags and use display: table.
删除所有br标签并使用display: table.
.text span {
background: rgba(165, 220, 79, 0.8);
display: table;
padding: 7px 10px;
color: white;
}
.fullscreen .large { font-size: 80px }
回答by Luca
use float: left;and clear: left;
使用float: left;和clear: left;
.text span {
background: rgba(165, 220, 79, 0.8);
float: left;
clear: left;
padding: 7px 10px;
color: #fff;
}
回答by ET-CS
Set the items into display: inlineand use :after:
将项目设置为display: inline并使用:after：
.text span { display: inline }
.break-after:after { content: '\A'; white-space:pre; }
and add the class into your html spans:
并将该类添加到您的 html 跨度中：
<span class="medium break-after">We</span>
回答by ultracrepidarian
Here is another solution (only relevant declarations listed):
这是另一种解决方案（仅列出相关声明）：
.text span {
display:inline-block;
margin-right:100%;
}
When the margin is expressed in percentage, that percentage is taken from the width of the parent node, so 100% means as wide as the parent, which results in the next element getting "pushed" to a new line.
当边距以百分比表示时，该百分比取自父节点的宽度，因此 100% 意味着与父节点一样宽，这会导致下一个元素被“推”到新行。
回答by Will
I think the best way to do this as of 2018 is to use flexbox.
我认为截至 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>回答by Bhushan Firake
I think floats may work best for you here, if you dont want the element to occupy the whole line, float it left should work.
我认为在这里浮动可能最适合你，如果你不希望元素占据整条线，浮动它应该可以工作。
.text span {
background:rgba(165, 220, 79, 0.8);
float: left;
clear: left;
padding:7px 10px;
color:white;
}
Note:Remove <br/>'s before using this off course.
注意：<br/>在使用它之前删除's。
回答by Rui Pimentel
If you're OK with not using <p>s (only <div>s and <span>s), this solution might even allow you to align your inline-blocks center or right, if you want to (or just keep them left, the way you originally asked for). While the solution might still work with <p>s, I don't think the resulting HTML code would be quite correct, but it's up to you anyways.
如果您可以不使用<p>s（仅<div>s 和<span>s），则此解决方案甚至可能允许您将inline-blocks 居中或向右对齐（如果您愿意的话（或者只是将它们保持在左侧，按照您最初要求的方式）。虽然该解决方案可能仍然适用于<p>s，但我认为生成的 HTML 代码不是很正确，但无论如何都取决于您。
The trick is to wrap each one of your <span>s with a corresponding <div>. This way we're taking advantage of the line break caused by the <div>'s display: block(default), while still keeping the visual green box tight to the limits of the text (with your display: inline-blockdeclaration).
诀窍是<span>用相应的.s 包裹每个s <div>。通过这种方式，我们利用了由<div>'s 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>回答by Pablo Navarro
You can try with:
您可以尝试：
display: inline-table;
For me it works fine.
对我来说它工作正常。
