CSS white-space: nowrap 导致溢出

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

我编辑了您的 fiddle 以显示所需的行为 - 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 class

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

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

Answer 4

你试过显示块吗？

.description {display:block;}

CSS white-space: nowrap 导致溢出

CSS white-space: nowrap results in overflow

css

whitespace

overflow