我花了一些时间试图在文本方面重叠一个预先标签,我正在尝试构建某种文本编辑器。但是,某种程度上,预先标签并未在其容器左上方呈现,而是在中间呈现。没有保证金或填充物将其拉下来,所以我没有想法。还有另一件奇怪的事情正在发生,Textarea具有位置:绝对,但是它的容器仍在延伸到Textarea的高度。
出于挫败感,我从此库中复制了确切的代码:http://satya164.xyz/reeact-simple-code-editor/。但是,即使它是完全相同的代码,它仍然不起作用。
我的当前代码:
const codeEditor = document.getElementById("code-editor__textarea");
const codeRenderer = document.getElementById("code-editor__pre");
codeEditor.addEventListener("keyup", e => {
codeRenderer.innerHTML = codeEditor.value;
});
*,
:after,
:before {
box-sizing: inherit;
}
body {
font-family: monospace;
line-height: 1.5;
margin: 0;
}
.code-editor {
margin: 1.67em 0;
max-height: 400px;
overflow: auto;
}
.code-editor__container {
background-color: #fafafa;
box-sizing: border-box;
font-size: 12px;
font-variant-ligatures: common-ligatures;
position: relative;
text-align: left;
white-space: pre-wrap;
word-break: keep-all;
}
#code-editor__textarea,
#code-editor__pre {
-webkit-font-smoothing: antialiased;
display: inherit;
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-variant-ligatures: inherit;
font-weight: inherit;
letter-spacing: inherit;
line-height: inherit;
padding: 10px;
tab-size: inherit;
text-indent: inherit;
text-rendering: inherit;
text-transform: inherit;
white-space: inherit;
word-break: inherit;
}
#code-editor__textarea {
-webkit-text-fill-color: transparent;
background: none;
border: none;
color: inherit;
height: 100%;
left: 0;
outline: 0;
overflow: hidden;
position: absolute;
resize: none;
top: 0;
width: 100%;
}
#code-editor__pre {
margin: 0;
pointer-events: none;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Code Editor</title>
</head>
<body>
<div class="code-editor">
<div class="code-editor__container">
<textarea id="code-editor__textarea" autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false"></textarea>
<pre id="code-editor__pre" aria-hidden="true"><br></pre>
</div>
</div>
</body>
</html>
容器上的 white-space: pre-wrap;
引起了这一点。
您已经使用绝对定位将文本箱从流中取出 - 但是在其仍在那里之前和之后,线路断开,并且由于您强迫容器尊重它们,因此它们相应地将预元素推向。
(删除它将使您的文本方面的高度依次较小,因为这将其设置为容器的100%高度。但是我想在您的情况下这将是理想的效果?)
只需在您的#code-editor __pre ID
中添加以下字段 position: absolute;
top: 0px;
right: 0px;
left: 0px;
bottom: 0px;
padding: 10px;
const codeEditor = document.getElementById("code-editor__textarea");
const codeRenderer = document.getElementById("code-editor__pre");
codeEditor.addEventListener("keyup", e => {
codeRenderer.innerHTML = codeEditor.value;
});
*,
:after,
:before {
box-sizing: inherit;
}
body {
font-family: monospace;
line-height: 1.5;
margin: 0;
}
.code-editor {
margin: 1.67em 0;
max-height: 400px;
overflow: auto;
}
.code-editor__container {
background-color: #fafafa;
box-sizing: border-box;
font-size: 12px;
font-variant-ligatures: common-ligatures;
position: relative;
text-align: left;
white-space: pre-wrap;
word-break: keep-all;
}
#code-editor__textarea,
#code-editor__pre {
-webkit-font-smoothing: antialiased;
display: inherit;
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-variant-ligatures: inherit;
font-weight: inherit;
letter-spacing: inherit;
line-height: inherit;
padding: 10px;
tab-size: inherit;
text-indent: inherit;
text-rendering: inherit;
text-transform: inherit;
white-space: inherit;
word-break: inherit;
}
#code-editor__textarea {
-webkit-text-fill-color: transparent;
background: none;
border: none;
color: inherit;
height: 100%;
left: 0;
outline: 0;
overflow: hidden;
position: absolute;
resize: none;
top: 0;
width: 100%;
}
#code-editor__pre {
margin: 0;
pointer-events: none;
position: absolute;
top: 0px;
right: 0px;
left: 0px;
bottom: 0px;
padding: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Code Editor</title>
</head>
<body>
<div class="code-editor">
<div class="code-editor__container">
<textarea id="code-editor__textarea" autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false"></textarea>
<pre id="code-editor__pre" aria-hidden="true"><br></pre>
</div>
</div>
</body>
</html>