文章/答案/技术大牛

发布

社区首页 >问答首页 >我试图在文本区域的顶部重叠一个预标记，但它只是漂浮在容器的中间

问我试图在文本区域的顶部重叠一个预标记，但它只是漂浮在容器的中间
EN

Stack Overflow用户

提问于 2019-02-15 08:59:37

回答 2查看 182关注 0票数 1

我花了一些时间试图在文本区域的顶部重叠一个预标记，我正在尝试构建一个文本编辑器。但是，不知何故，pre不是在容器的左上角呈现，而是在中间呈现。没有空白处或垫子把它拉下来，所以我没有主意了。还有一件奇怪的事情发生了，文本区域有位置:绝对，但是它的容器仍然延伸到文本区域的高度。

出于沮丧，我从这个库中复制了确切的代码：http://satya164.xyz/react-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>

javascript

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-02-15 09:29:51

容器上的white-space: pre-wrap;会导致这种情况。

您已经使用绝对定位将文本区域从流中删除--但是行在它仍然存在之前和之后中断，并且由于您强迫容器遵守它们，它们相应地将预元素向下推。

(移除它将使您的文本区域依次具有较小的高度，因为这被设置为容器的100%高度。但我想这是你想要的效果吧？)

票数 2

Stack Overflow用户

发布于 2019-02-15 09:08:05

只需将以下字段添加到您的代码编辑器_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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54705691

复制

相似问题

问我试图在文本区域的顶部重叠一个预标记，但它只是漂浮在容器的中间
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我试图在文本区域的顶部重叠一个预标记，但它只是漂浮在容器的中间EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我试图在文本区域的顶部重叠一个预标记，但它只是漂浮在容器的中间
EN