html - 容器扩展上的 CSS 强制换行

Question

我有什么:

HTML:

<div class="container">
    <div class="text">
        Some long text
    </div>
    <div class="extendable">
        <img>
    </div>
</div>

CSS:

.container {
    float: right;
    min-width: 10em;
    padding-left: 1em;
    .text {
        padding: 0.3em;
    }
}

每个 block 都有动态宽度和高度。
http://jsfiddle.net/vZ4eA/

我想要什么:
如果内容太大，.text 不应该扩展 .container。应该有强制换行。
另一方面，.extendable 应该使 container 如果内容超过宽度(表现正常)更大。

Answer 1

需要在.text上设置固定宽度，然后使用word-break:break-all;

使用 jQuery，您可以将 .text 的宽度设置为 .extendable 的宽度。

 var exWidth = $('.extendable').css('width');
 $('.text').css('width', exWidth);

http://jsfiddle.net/vZ4eA/16/

编辑:仅 CSS

您可以尝试将 .text 放在 .extendable 中。

参见此处:http://jsfiddle.net/vZ4eA/18/

编辑 2:CSS:

在这个答案的帮助下 https://stackoverflow.com/a/7231607/1399670我已经更新了 fiddle 以满足您的要求。

http://jsfiddle.net/vZ4eA/20/