Question

我无法将contentEditable元素显示为一个固定的框（例如2个字符宽）。因为它只是填充的宽度。当框中有文本时工作正常，但我希望有一个宽度为一的空盒子。有什么想法吗？

HTML：

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="so.css" />
<body>
<h1 id="prompt">Type something in the box:</h1>
<h1 id="textarea"></h1>
</body>

的CSS：

#prompt, #textarea{
    display:inline;
}

#textarea{
    contentEditable: true;
    width: 2em; /* 20px doesn't work either */
    cursor: text;
    background-color:rgba(132, 225, 132, 0.9);
    border: 1px solid black;
    padding: 2px;
}

Answer 1

首先，您必须将HTML中的contentEditable="true"设置为属性。

您可以使用 Flexbox 并将min-width设置为#textarea，将flex-shrink: 0;设置为#prompt。因此#textarea会增长，但不会推送#prompt。

.content {
  display: flex;
}

#prompt {
  flex-shrink: 0;
}

#textarea {
  min-width: 100px;
  word-break: break-all;
  cursor: text;
  background-color:rgba(132, 225, 132, 0.9);
  border: 1px solid black;
}

<div class="content">
  <h1 id="prompt">Type something in the box:</h1>
  <h1 contentEditable="true" id="textarea"></h1>
</div>

Answer 2

内联元素不能有宽度或高度。你应该试着让它们成为至少内联块。

如何设置固定宽度的html contentEditable div

2 个答案: