Question

所以我有一个带有输入字段及其描述的容器。如果描述很短，我希望将其放在输入字段旁边，但是如果描述较长，我不希望将其分为两行。我试图用white-space：nowrap;解决它。属性的描述，但问题是，如果描述很长，则会使容器溢出。

这是一个简单的展示柜： https://jsfiddle.net/mw2gpLqd/2/

<div class="container">
    <input type="text" />
    <span>Very long description which wraps to new line</span>
</div>

是否有一种方法可以使描述防止被分成两行，但仍然可以被包装以防容器溢出？

谢谢！

Answer 1

您可以使用display：inline-block属性。

<div class="container">
    <input type="text" />
    <span style="display: inline-block;">
    Very long description which wraps to new line
    Very long description which wraps to new line
    Very long description which wraps to new line
    Very long description which wraps to new line
    </span>
</div>

Answer 2

您应该使用flex

我编辑了您的小提琴以显示所需的行为-https://jsfiddle.net/defsrk9p/

或者这是一个示例

body {
  background: white;
}

.container {
  width: 300px;
  border: 1px black solid;
  padding: 10px;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
}

input {
  width: 200px;
}

<div class="container">
<input type="text" />
<span>[min]</span>
</div>

<div class="container">
<input type="text" />
<span>Longer description which wraps to new line</span>
</div>

<div class="container">
<input type="text" />
<span class="description">Very long description which wraps to new line</span>
</div>

<div class="container">
<input type="text" />
<span class="description">Even longer description which will overflow the width of the container, because it has the white-space: nowrap; property</span>
</div>

Answer 3

只需更新您的.description类

.description {
  white-space: nowrap;
  display:flex;
  overflow: auto;
}

您可以在这里找到工作示例：https://jsfiddle.net/6aw8L1v5/

Answer 4

您尝试过展示广告块吗？

.description {display:block;}

CSS空格：nowrap导致溢出

4 个答案: