使fieldset适合其封闭的div

Question

代码：

HTML

<div>
    <fieldset>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </fieldset>
</div>

CSS

div {
    width: 200px;
    height: 100px;
}

问题：字段集不适合div

如何让fieldset不超过div的大小？

例如，如果我用CSS设置div的大小，那么该字段集将占用多少空间没有区别。

如何解决这个问题？

修改

我想有两个选择来解决这个问题：

一，在div中具有滚动功能

和两个，将文本分解为字段集内的新行。

Answer 1

试试这个css代码：

div {
    word-break: break-all;
}

解决此问题：

div {
    height: 100px;
    width: 100px;
    word-break: break-all;
    overflow-y: auto;
}

<div>
    <fieldset> 
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </fieldset>
</div>

Answer 2

您的容器或word-break: break-all;元素只需要fieldset。

已编辑：已将overflow: auto;添加到容器元素，因此它会滚动，因为它具有固定的高度。

＆＃13;

＆＃13;

div {
  height: 100px;
  width: 200px;
  overflow: auto;
}

fieldset {
  word-break: break-all;
}

＆＃13;

<div>
    <fieldset>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </fieldset>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

如果你不希望字段集超过其父级的固定大小，那么你必须允许它有滚动条：

div { width: 200px; height: 100px; }
fieldset { width: 100%; height: 100%; overflow: auto; }

Answer 4

您在此遇到的问题是由于您的测试字符串“aaa”不包含空格，因此不会使用行返回进行分解，因此会扩展字段集宽度。

理想情况下，您应该使用“lorem ipsum”模板等词语测试您的布局。