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

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

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

score 1 · Accepted Answer

您需要设置一个固定的宽度.text，然后使用word-break:break-all;

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

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

编辑：仅 CSS

你可以试试放在.text里面.extendable。

编辑 2：CSS：

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

score 1 · Accepted Answer

您可以将 amax-width用于文本nowrap

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

}

编辑：

为了回应下面的评论之一，max-width应该可能是一个动态值，以便使用容器的动态宽度。javascript您可以使用or轻松实现此行为jQuery

jQuery

我建议你查看这个插件来处理你的重新调整大小div

$("#div").resize(function(e){
    $(".text").css({"max-width" : $(this).css("max-width") });
});

score 0 · Accepted Answer

0

我认为适用的唯一方法是在 .text 上设置 max-width

于 2013-04-16T13:53:57.610 回答

score 0 · Accepted Answer

您可能必须在 .container 调整大小时动态更新 .text 的最大宽度；具体来说，在页面加载和视口调整大小时。您可以使用 jQuery来做到这一点。

4 回答 4