是否可以显示为＆＃34; block＆＃34;如果内容＆＃34;换行＆＃34;但显示＆＃34;内联＆＃34;除此以外？

Question

我的代码看起来有点像这样：

<div class="some-class">
    <span>NameOfThing</span>
    <div class="block-or-inline">
        <span style="white-space: nowrap">ValueOfThing1</span>
        <span style="white-space: nowrap">ValueOfThing2</span>
    </div>
</div>

如果div.block-or-inline中的内容短于其容器的宽度（没有换行符），我希望所有内容都在一行上呈现。但是如果内容更宽 - 导致换行 - 我希望两个内部跨越突破新线。

这可能吗？

Answer 1

我刚离开键盘几分钟，意识到解决这个问题的一个简单方法就是将我要打破的两段内容放在同一个“white-space：nowrap”范围内的新行中：

<div class="some-class">
    <span>NameOfThing</span>
    <span style="white-space: nowrap">ValueOfThing1 ValueOfThing2</span>
</div>

Answer 2

如果要在单行中渲染内容，可以将css属性设置为overflow：hidden;到div.block-or-inline和一个特定的宽度，如果内容比div宽，其余部分将消失。 这是一种显示内容以避免换行的方法。