一个 contenteditable div 怎么能不在非空白处打断单词并表现得像一个正常的 div？

Question

我有一个案例，用户将文本输入到一个 contenteditable div 中，结果稍后显示在一个正常的 div 中。输入 div 设置了最大宽度以允许文本换行。

问题是文本在输入和输出中的显示不同。输入似乎在单词内部中断，而输出让文本溢出并且只在空白处中断。是否有可能在输入中获得相同的行为？

查看此 fiddle 示例：https://jsfiddle.net/s1m40m2p/1/

html

<body>
  <div contenteditable="true" id="input-div" class="both-divs"></div>
  <div id="output-div"  class="both-divs"></div>
</body>

css

.both-divs {
  min-height : 20px;
  max-width: 100px;
  font-size: 16px;
  font-family: monospace;
  overflow: visible;
}

#input-div {
  outline: 1px solid red;
}

#output-div {
  outline: 1px solid blue;
}

js

const inputElt = document.getElementById('input-div')
const outputElt = document.getElementById('output-div')
inputElt.addEventListener('input', () => {
  outputElt.innerText = inputElt.innerText;
})

输出

Answer 1

尝试在 #input-div 中添加 overflow-wrap:normal {` 您的问题将得到解决

const inputElt = document.getElementById('input-div')
const outputElt = document.getElementById('output-div')
inputElt.addEventListener('input', () => {
 outputElt.innerText = inputElt.innerText;
})

.both-divs {
  min-height : 20px;
  max-width: 100px;
  font-size: 16px;
  font-family: monospace;
  overflow: visible;
}

#input-div {
  outline: 1px solid red;
overflow-wrap:normal;
}

#output-div {
  outline: 1px solid blue;
}

<html>
<body>

<div contenteditable="true" id="input-div" class="both-divs">

</div>
<div id="output-div"  class="both-divs">
</div>
</body>
</html>

一个 contenteditable div 怎么能不在非空白处打断单词并表现得像一个正常的 div？

How can a contenteditable div not break words on non-whitespace and behave as a normal div?

html

contenteditable

word-wrap