简而言之，我想要一个从下到上的文本框，以保持我定义的宽度和高度。添加样式position:relative时保持光标左下角有效，这使得div在添加文本时自动增长。当使用position:absolute时，光标变为左上角。
如何重现问题:
打开 jsfiddle 并将右下角的更多文本写入文本框，直到溢出。目标是保持 div 的大小，但同时保持插入符号位于左下角
我被迫使用 div“contenteditable=true”来创建一个漂亮的文本框。该 div 是由服务器“swellrt”创建的，我可以添加属性和样式，但我无法更改文本将进入这一 div。
它的大局是关于一个协作文本编辑器，其中服务器负责所有用户的所有文本所在的 div，并从同一 div 中获取用户的编辑，使用 a 发布和获取所有更改直播 webrtc channel 。在客户端，我只能更改由服务器控制的 div 的样式和属性。
插入符号或光标基本上应开始并(只要用户不移动)停留在文档的底部。
我可以用下面的例子做到这一点，但是使用position:relative，div的高度会在溢出时增加(当我们输入大量文本时)。但是当将位置更改为绝对位置时，插入符号将再次从左上角开始。
https://jsfiddle.net/pa0owso5/20/
<html>
<style>
.canvas {
background-color: #fff;
box-shadow: 0 4px 14px -4px #919191;
border: 1px solid #e0e0e0;
height: 200px;
width: 400px;
margin: 20px;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
word-wrap:break-word;
vertical-align: bottom;
display: table-cell;
word-wrap:break-word;
overflow: scroll;
vertical-align: bottom;
display: table-cell;
position:relative;
}
</style>
<div contenteditable=true class="canvas">
text should start bottom left
</div>
</html>
我当前使用的关键 css 元素是:
vertical-align: bottom;
display: table-cell;
word-wrap:break-word;
position:relative;
最佳答案
通过使用position:relative，你的插入符能够知道 Canvas 的“底部”在哪里。如果您在 Canvas 类上使用position:absolute，这意味着您是“该 Canvas 的主人”，但当然您也必须自己设置所有值。因此，这意味着您的插入符不会自动知道底部在哪里。 无论如何，您可以添加一个额外的“插入符”类，并为该类提供定位自身所需的信息。
尝试在 CSS 中执行以下操作:
.canvas {
background-color: #fff;
box-shadow: 0 4px 14px -4px #919191;
border: 1px solid #e0e0e0;
height: 300px;
width: 500px;
margin: 20px;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
word-wrap:break-word;
vertical-align: bottom;
display: table-cell;
word-wrap:break-word;
overflow: scroll;
vertical-align: bottom;
display: table-cell;
position:absolute;
}
.caret {
margin-top: 250px;
position: relative;
}
在你的 HTML 中:
<div contenteditable=true class="canvas">
<div contenteditable=true class="caret">
testtext
</div>
</div>
干杯!
关于javascript - HTML 文本编辑器 div - 强制文本从底部开始 - 从下到上文本框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49341842/