Question

我正在尝试向可编辑的div显示行号。因此，内容不是静态的，可以像普通编辑器一样进行编辑。到目前为止，我可以添加行号，但是当我添加新行或删除行时，行为不正常。

这是代码。

#textarea {
    outline: 0px solid transparent;
    padding: 10px 16px;
    counter-reset: line;
}
#textarea .lines {
  display: block;
}
#textarea .lines:before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  border-right: 1px solid #ddd;
  margin-right: .5em;
  color: #888
}

<div placeholder="Type here..." id="textarea" style="font-size:20px;resize: inline;width: 100%;margin-top: 0px; border: 1px solid #ddd;height: 89vh;overflow-y: auto;" spellcheck="false" contenteditable="">
<span class="lines">India win series 2-1 in the series decider</span>
<span class="lines">India chases a tricky 300+ score at Cuttack with the top 3 contributing once again with their half-centuries. Captain Virat Kohli was adjudged man of the match for his vital 85 runs which indeed guided the team when the openers departed after a century-plus stand.</span>
<span class="lines">Also, Rohit Sharma was awarded man of the series and he also end has the highest run-getter in ODIs this year. Earlier West Indies scored 100+runs in their last 10 overs to set a target of 316 for the hosts to chase. Pollard and Pooran had 100plus stand in quick time to take West Indies to a formidable total.</span>
<span class="lines"></span>
<span class="lines"></span>
</div>

**

所以我想解决合并两行并在contenteditable中插入新行的问题

内容可编辑div

0 个答案: