Question

我有一个div，contenteditable标记设置为true 另外，我已使用CSS添加了width，height等。

然后就是结果：

＆＃13;

#stringinput {
    min-width: 20em;
    min-height: 1.4em;
    max-width: 40em;
    max-height: 10em;
    padding: 0.3em 0.5em 0 0.5em;
    background-color: white;
    font-size: larger;
    text-align: left;
    border: 3px solid black;
    border-radius: 5px;
}

＆＃13;

<div contenteditable="true" id="stringinput" spellcheck="false"></div>

＆＃13;

它运行正常，但是当您输入并达到max-height限制时，div会向下扩展，但边框会保持原样。

因此，当某人达到max-height限制时，我希望滚动条显示，以便div不会向下扩展。我该怎么办？

Answer 1

插入overflow-y: auto;，如下所示：

#stringinput {
    overflow-y: auto;
   //More code
}

完整代码：

#stringinput {
    min-width: 20em;
    min-height: 1.4em;
    max-width: 40em;
    max-height: 10em;
    padding: 0.3em 0.5em 0 0.5em;
    background-color: white;
    font-size: larger;
    text-align: left;
    border: 3px solid black;
    border-radius: 5px;
    overflow-y: auto;
}

<div contenteditable="true" id="stringinput" spellcheck="false">
Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
</div>

overflow-y: auto属性会在达到max-height（y轴）限制时自动启用滚动条。

Answer 2

你的代码没问题，只需将overflow-x：隐藏在css中即可使用

＆＃13;

#stringinput {
    min-width: 20em;
    min-height: 1.4em;
    max-width: 40em;
    max-height: 10em;
    padding: 0.3em 0.5em 0 0.5em;
    background-color: white;
    font-size: larger;
    text-align: left;
    border: 3px solid black;
    border-radius: 5px;
    overflow-x : hidden;
}

＆＃13;

<div contenteditable="true" id="stringinput" spellcheck="false"></div>

＆＃13;

Answer 3

＆＃13;

#stringinput {
    min-width: 20em;
    height: 2.4em;
    max-width: 40em;
    overflow: scroll;
    max-height: 10em;
    padding: 0.3em 0.5em 0 0.5em;
    background-color: white;
    font-size: larger;
    text-align: left;
    border: 3px solid black;
    border-radius: 5px;
}

＆＃13;

<div contenteditable="true" id="stringinput" spellcheck="false"></div>

＆＃13;

为了启用滚动条。您需要设置高度并定义所需的溢出行为（此处可滚动）。

如何用max-height显示contenteditable div中的滚动条？

3 个答案: