html - contenteditable overflow-x 以宽度 : 100% 不断扩展

Question

我有一个 contenteditable div，我想填充 100% 的容器。

div 应用了以下样式，其中包括:

width: 100%;
max-width: 100%;
height: 480px;
overflow-x: auto;
overflow-y: scroll;
word-wrap: break-word;
overflow-wrap: break-word

问题是文本永远不会水平换行。尽管设置了 width 和 max-width，但一旦每行的长度超过其原始宽度，div 将继续无限扩展。

将属性更改为明确的数量，例如960px，达到了预期的效果。 div 保持定义的大小，一旦到达明显的行尾，水平文本就会在其中换行。不过，我希望 contenteditable div 消耗其父级的 100%。我如何让它填充父级而不在文本输入时无限地水平扩展？

电影

Answer 1

你可以试试

text-overflow:ellipsis;