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;
    }
}

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

我想要的是什么：
如果内容过大，.text则无法扩展.container。应该有一个强行换行另一方面，.extendable如果内容超出宽度（行为正常），则应使container更大。

Answer 1

您可以使用max-width作为文本以及nowrap

.text{
padding: .3em;
border: 1px solid red;
max-width: 200px;
word-break: break-all;
display: block;

}

Working Example

修改

要回复以下评论之一，max-width应该是动态值，以便使用容器的动态宽度。您可以使用javascript或jQuery
轻松实现此行为
<强>的jQuery

我建议你查看this plugin来处理div
的重新调整大小
$("#div").resize(function(e){ $(".text").css({"max-width" : $(this).css("max-width") }); });

Answer 2

您需要在.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的帮助下，我已根据您的要求更新了小提琴。

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

Answer 3

我认为这里适用的唯一方法是在.text

上设置max-width

Answer 4

你可能需要动态更新.text的最大宽度为.container resizes;特别是在页面加载和视口大小调整上。您可以执行此操作using jQuery。

容器扩展上的CSS强制行中断

4 个答案: