Question

我的财产contenteditable="true"。

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

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

这是js Fiddle

如果你愿意，也可以使用jquery。

Answer 1

您可以将contenteditable div包装在2个容器中，一个用于overflow:auto;的宽度和高度，另一个用于display-table;属性，因此文本以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;
}

Answer 2

当你没有指定高度时，当更多信息被添加到divage中时，它将自动垂直增长。但我认为你必须确保内容是绝对的和/或你可以尝试这个简单的代码，看它是否有帮助

试试这个，CSS代码。

.scroll {
width:100px;
height:100px;
overflow:scroll;
}

HTML代码

<div class="scroll">
SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE. SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.
</div>

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

2 个答案: