如何让'nowrap'“更柔和”？

Question

简化，我有三个元素A，B和C. B和C在div中。如果有足够的水平空间（浏览器窗口足够宽），我希望它们显示为

A B C

到目前为止，这是微不足道的。如果窗口变小，我希望它们像这样包裹：

A
B C

我通过给div style.whiteSpace = "nowrap"解决了这个问题。 问题是，B C现在根本不会再包装，即使没有足够的空间来显示它们。当窗口变得更小时，我希望它显示为

A
B
C

所以我正在寻找的是一种更柔软的'nowrap'版本，如果有逃避的空间就会阻止包装，但如果没有则允许包装。

编辑：

通过让所有内容浮动来回复上述问题：http://jsfiddle.net/nF4k5/6/

这让我意识到我的简化太过分了。实际上在我的应用程序中A是一个文本并且自身包装，因此有时会填满整个宽度。 B和C可以被想象为应该出现的单个单词 a）在文本A的最后一行或如果它们不适合在一起 b）在新线上或该线太短 c）两行。

我举了一个例子来讨论：http://jsfiddle.net/nF4k5/5/

应该导致更小的屏幕：

A A A A B C

A A A A
B C

A A A
A B C

A A
A A
B C

A
A
A
A
B
C

如果解决方案没有涉及对A进行更改，那就特别好了，就像我在B C附近添加了nowrap一样，这不起作用。

编辑： 解决方案：而不是给B和C的包装器一个whiteSpace =“nowrap”我给它一个display =“inline-block”。

Answer 1

将A中的A，B和C放入Y.浮点X和Y左侧。 只要宽度小于X + Y的宽度，Y就会下降。

在Y里面：把B放在div sonOfX中，把C放在sonOfY中，将子孙子和子孙子放到左边。 每当宽度小于sonOfX + sonOfY的宽度时，sonOfY就会下降。

在这里 - http://jsfiddle.net/nF4k5/

这应该是：http://jsfiddle.net/nF4k5/7/用于您的新问题

Answer 2

既然你说这些是元素，我假设你的意思是HTML元素，对吧？如果是这种情况，只需浮动它们。这是花车的自然行为。