如何在文本中的每行右侧覆盖difs

Question

我想在用户键入这样的文本方面的每行右键文本：

它也应该支持这样的滚动（请参阅视图时如何切断顶部？）：）：）：

我该怎么做？

编辑：

另外，右侧的任何DIV都应在悬停时进行动画动画，然后单击时，内容应复制到剪贴板上。像这样：

Answer 1

只需在两个不同的文本区域中放置一个，然后将一个区域放在左和第二到右。然后使它们在视觉上看起来像一个：左MAKE 边界右翼：0; for-righ- border-left：0;

对于您的任务，您可以使用texterea和div这样：

* {
  margin: 0;
  padding: 0;
}

.textarea-block {
  box-sizing: border-box;
  display: inline-block;
  border: 1px solid #eee;
  padding: 10px;
  width: 400px; /* Here you could use % or wh to make it looks better in your app */
}

/* Don't forget to make a clearfix after floats */
.textarea-block:after {
  content: '';
  clear: both;
}

.left {
  font-family: Arial;
  font-size: 16px;
  border: 0;
  width: 50%;
}

.right {
  font-family: Arial;
  font-size: 16px;
  display: inline-block;
  text-align: right;
  width: 50%;
  float: right;
}

<div class="textarea-block">
  <textarea name="" cols="30" rows="10" class="left">First line 
Second line</textarea>
  <div class="right">
    First line <br>Second line
  </div>
</div>

只需确保将相同的font-size和font-family to textarea和div进行，以使文本看起来相同。