javascript - 当之前的 div 充满 JQuery 时显示 div

Question

我想在之前的div内容满了文字的时候显示div，然后继续用剩下的文字填充这个新的div。

我不知道怎么办。事实上，在下面的代码中我写道，div 是在单击按钮时显示的。我也无法设置上面解释的“填充操作”。

一个 div 中的字数限制必须可以从代码中设置。

例如，如果我将限制设置为两个字，并且只有两个字要显示，则不应创建第二个 div。

但是如果要显示四个字，限制还是两个字，必须创建第二个 div，并且必须用第三个和第四个单词填充。

另一个问题是如果我写 HTML 文本(例如 <font color="#ff0000"> )，标签(例如 <font )不应该被视为一个词。

Jsfiddle

HTML:

<div id="faketxt" contenteditable>Write Here</div>
<button id='btn'>OK</button>
<div id='casella' class='fakes'></div>

CSS:

#faketxt {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
border: 1px solid gray;
height: 28px;
overflow: auto;
padding: 2px;
resize: both;
width: 400px;
}

#casella{
  width: 150px;
  height: 300px;
  font-size: 10px;
  border-style: solid;
}

.fakes{
  width: 150px;
  height: 300px;
  font-size: 10px;
  border-style: solid;
}

JQUERY:

$('#btn').click(function() {
  var primo = document.getElementById('faketxt');
  var secondo = document.getElementById('casella');
  secondo.innerHTML = primo.innerHTML;
  var myDiv = $('#casella');
  myDiv.text(myDiv.text().substring(0,5)) //This is when the div is "full"
});

document.getElementById("btn").onclick = function () {
var ok = true;

 if (ok === true) {
      var div = document.createElement('div');

      div.className = 'fakes';       

   document.getElementsByTagName('body')[0].appendChild(div);
  }
};

在这种情况下，我设置当有 5 个字母时 div 已满，因此必须在第二个 div 中显示单词“Here”...这可能吗？我想不通。

Answer 1

在正确的位置显示div

CSS:

.fakes{
   width: 150px;
   height: 300px;
   font-size: 10px;
   border-style: solid;
   display : inline-block;
 }

 #boxes{
   display : flex;
 }

HTML

<div id="faketxt" contenteditable>Write Here</div>
<button id='btn'>OK</button><br>
<div id="boxes">
  <div id='casella' class='fakes'></div>
</div>