如何在不让里面的文本断行的情况下格式化这个 div?

Question

我有这个html代码

<h2>
<div style="display:flex">
<div>
Section III :
</div>
<div>
Very long parangrapgggggggggggggggggggggggggggggggggggggggggggggggggggggggg
</div>
</div>
</h2>

第一个div 内的空间组成了一条新线， 任何人都可以建议如何达到这种格式吗？我在第三节下面没有任何内容， 我不想使用tho，也不想调整宽度填充等，有没有办法实现这一点？

Answer 1

看起来文本分成多行，这使得它看起来很奇怪。我添加了white-space: nowrap样式。您可能还想在两个div 之间添加一些间距。

<h2>
<div style="display:flex; white-space: nowrap;">
<div>
Section III :
</div>
<div>
Very long parangrapgggggggggggggggggggggggggggggggggggggggggggggggggggggggg
</div>
</div>
</h2>

Answer 2

尝试从div标签中white-space:nowrapcss

Answer 3

您必须将display:flex应用于外部div，display: inline-block应用于内部div

.myClass {
display: inline-block;
background-color: green;
}
.outerDiv {
display: flex;
}

<h2>
<div class="outerDiv">
<div class="myClass">
Section III :
</div>
<div class="myClass">
Very long parangrapgggggggggggg
</div>
</div>
</h2>