创建特定的 HTML 布局

Question

我需要在 HTML 中创建一个特定的布局。

方法如下

颜色仅用于演示目的。我想创建一个可编辑区域，该区域以不可编辑文本内联开始，并在不可编辑文本下方的下一行继续。

这是创建模板的要求，用户将在其中直接添加删除文本。

Normal Divs 和 Sections 在这里没有帮助我，谁能给我一些指示？

我已经尝试过以下事情，

• 将Div 设置为contenteditable，其中包含不可编辑的文本
• 我保留了 Span 并试图将其移到 Div 上，这是一个不好的解决方案，我不得不对 div 中的文本使用偏移量，这会破坏第一行之后的所有行。

这是一个动态生成的布局，所以我不能随时准备好 CSS 尺寸。

Answer 1

如果您可以将图像用于不可编辑的文本，则可以使用图像作为背景并对其进行处理：

body {font-family: 'Verdana'; font-size: 10pt;}
.editable {background: url('http://i.imgur.com/cAZvApm.png') -1px 1px no-repeat; text-indent: 8.5em; margin: 0 0 10px;}

<div contenteditable class="editable">Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept. Learn more about incognito browsing.</div>

<div>Now try to edit the above text and check out!</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
  if (document.body.createTextRange) {
    var range = document.body.createTextRange();
    range.moveToElementText(document.querySelectorAll(".editable")[0]);
    range.select();
  } else if (window.getSelection) {
    var selection = window.getSelection();        
    var range = document.createRange();
    range.selectNodeContents(document.querySelectorAll(".editable")[0]);
    selection.removeAllRanges();
    selection.addRange(range);
  }
  document.querySelectorAll(".editable")[0].focus();
</script>

预览：