html - 如何在使用 CSS 的文本之前在文本区域内保留一些具有特定尺寸的空间？

Question

我有一个 <textarea> .它有一些特定的大小，比如 400px X 400px。我可以在里面打字。但我应该能够在留出一些空间后打字，如果我清除文本，光标应该停在那里，比如使用退格键。

下面的图片显示了我想说的话；

它就像一个 div 中的一个 div。文字不应该出现在橙色的空间。这并不意味着 div 可以充当覆盖层，以便文本可以保留在其下方。这不是简单的叠加问题。我怎样才能单独使用 HTML 和 CSS 来做到这一点？

Answer 1

您可以尝试使用 HTML5 ContentEditable。

HTML 代码

<div id='wrapper'>
    <div id='box'></div>
    <div contenteditable='true' id='edit'>
    </div>
</div>

CSS 代码

#box {
    background-color : orange;
    width : 100px;
    height : 100px;
    float : left;
    margin : 0 10px 10px 0;
}
#wrapper {
    border : 1px solid red;
    padding : 10px;
}
#edit {
    height : 300px;
}

JSFiddle 演示:http://jsfiddle.net/6gkHV/2/

看看这是否有帮助。