如果内容“换行”，是否可以显示为“块”，否则显示“内联”？答案

【问题标题】：Is it possible to display as "block" if content "line breaks" but display "inline" otherwise?如果内容“换行”，是否可以显示为“块”，否则显示“内联”？
【发布时间】：2017-03-28 23:50:33
【问题描述】：

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

<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 中的内容比其容器的宽度短（没有换行符），我希望所有内容都呈现在一行上。但如果内容更宽 - 导致换行 - 我希望 BOTH 跨越内部以换行。

这可能吗？

【问题讨论】：

标签： html css inline line-breaks nowrap

【解决方案1】：

我刚刚离开我的键盘几分钟，并意识到解决这个问题的一个简单方法是将我想要换行的两条内容放在相同的“空白：nowrap”跨度下：

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

【讨论】：

【解决方案2】：

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

【讨论】：

是的，溢出隐藏也是一个有用的属性。但它确实有东西消失的副作用..
你是对的，是问题，但是如果你尝试放置更多容器宽度接受的文本内容，文本将被换行。