Html CSS强制在容器扩展上换行

我所拥有的：

HTML:

每个区块都有动态宽度和高度。

我想要什么：
如果内容太大，

.text

应该无法扩展

.container

。应该有强制断线。

---

.extendeable

另一方面，如果内容超过宽度，则应使

容器

更大（正常行为）。

您可以将

最大宽度

与

nowrap

一起用于文本

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

}

编辑：

为了响应下面的一个注释，

max width

可能应该是一个动态值，以便使用容器的动态宽度。您可以使用

javascript

或

jQuery

jQuery

我建议您签出以处理您的

div

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

---

我认为这里唯一适用的方法是设置最大宽度。text

您需要在

上设置固定宽度。text

然后使用

单词break:break all

使用jQuery可以将
.text
的宽度设置为
.extendeable
的宽度

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


编辑：仅CSS

您可以尝试将
.text
放在
.extendeable
内

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

请看这里：

编辑2:CSS:

在这个答案的帮助下，我更新了小提琴以符合您的要求

您可能需要在.container调整大小时动态更新.text的最大宽度；具体来说，在页面加载和视口调整时。您可以这样做。
如果
.container
变宽，你想让
.text
也变宽以水平填充吗？@Ejay yes
.text
如果
.container
变宽了也应该扩展。如果
.container
小于此最大宽度，它仍然会扩展，如果
.extendeable
大于此最大宽度，它就不会扩展。@NikoM。我编辑过，这是你想要的吗？如果没有，请告诉我。结果肯定是我想要的。问题是，我不想使用javascript进行初始样式调整。尤其是像这样简单的事情…@NikoM。您不需要使用javascript来设置样式，只需要动态更改即可。没有办法解决这个问题…如果有办法解决这个问题，取决于我是否能够找到一个css解决方案来实现所需的行为。我目前正在使用属性
display
position
和
float
尝试一些东西。如果我找不到解决方案，也没有CSS极客参与解决方案，我想我将不得不使用js解决方案。但是我不喜欢这种“肮脏”的编码。。。
 var exWidth = $('.extendable').css('width');
 $('.text').css('width', exWidth);