Question

当我使用white-space: pre; css样式来保留内容可编辑div（How to preserve white spaces in content editable div）中的空格时出现问题。

当我在contenteditable div中键入内容并且输入文字点击contenteditable div的右边框时，文字不会传递到第二行，它会一直停留在第一行，因此文本水平溢出contenteditable div。

如何在文本点击contenteditable div的右边框时强制文本传递到下一行？谢谢！

Answer 1

将white-space: pre更改为pre-wrap，您的文字将换行。

white-space: pre表示文本中保留了空格，除非您添加回车符或<br>

，否则行不会换行到下一行

#ediv {
    white-space: pre-wrap;
    background: #FFFFFF;
    height: 60%;
    width: 50%;
    color: black;
    border: 1px solid #C0CAD5;
    padding: 3px 25px 3px 3px;
    cursor: text;
}

<div id='ediv' contenteditable='true'>
  
</div>

More information on white-space css

Answer 2

这是因为你已经提到了div的宽度和高度。这样可以修复页面上的div，并且在div标签的边界之外无法看到文本。

我有两个例子。第一个工作，第二个工作就像你的工作的 1

<div contenteditable="true">This is a paragraph. It is editable. Try to change this text.</div> </body>

2

<html> <body> <div contenteditable="true" style="width:100px;height:100px;">This is a paragraph. It is editable. Try to change this text.</div> </body>

文本没有传递到contenteditable div中的第二行

2 个答案: