javascript – 高度自动增加div与contenteditable =“true”

2023年2月6日 209次阅读

我有财产contenteditable =“true”.

<div contenteditable="true" class="textarea"></div>

要求
1.文本应垂直和水平居中对齐.
2.高度不应随着div内容的增加而自动增加,如果div内的内容增加,则需要显示滚动条.

这是js Fiddle

如果你愿意,也可以使用jquery.

最佳答案 您可以将contenteditable div包装在2个容器中,一个用于宽度和高度,使用overflow：auto;和一个显示表;属性,所以文本是horzontaly中心：

DEMO

HTML：

<div class="container1">
    <div class="container2">
        <div contenteditable="true" class="textarea"></div>
    </div>
</div>

CSS：

.container1{
    height:60px;
    width:273px; 
    overflow:auto;
    border:1px solid green;
}
.container2 {
    min-height:100%;

    display:table;
}
.textarea {
    width:273px;
    font-size: 18px;
    font-weight: normal;
    line-height: 18px;
    outline: none;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    word-wrap: break-word;
    overflow:hidden;
}
点赞