Javascript 如何停止这种在jquery中限制单词的奇怪行为？

点击查看。
我可以成功地限制word enter，但发生了一件奇怪的事情。当你达到最大值时，第六个单词仍然会出现。如果我继续输入，它会不断替换最后一个单词。我不想在第五个字出现。帮忙，谢谢

JQuery：

$("#input").keydown(function(event) {

  var count = $('#test').text();
  var words = count.match(/\S+/g).length;
  if (words >= 5) {
    var trimmed = $('#test').text().split(/\s+/, 5).join(" ");
    // Add a space at the end to keep new typing making new words
    $('#test').text(trimmed + " ");

  }

  if (event.which == 13) {
    event.preventDefault();
    //put input value into div
    var value = $('#input').val();
    $('#test').text($('#test').html() + " " + value);

  }


});

CSS:

HTML:

狗

将enter处理程序移动到else部分

$（“#输入”）.keydown（函数（事件）{
变量计数=$（“#测试”）.text（）；
var words=count.match（/\S+/g）.length；
如果（单词>=5）{
var trimmed=$（'#test'）.text（）.split（/\s+/，5）.join（“”）；
//在末尾添加一个空格，以保留新键入的内容并生成新单词
$（'#test'）。文本（修剪+“”）；
}else if（event.which==13）{
event.preventDefault（）；
//将输入值放入div
var值=$（“#输入”）.val（）；
$（'#test'）.text（$（'#test'）.html（）+“”+value）；
}
});
.test{
显示：内联块；
}

狗
如果你不想在5个单词后显示任何内容，那么你应该在
If
中什么也不做。当你在这里有一个代码片段时，为什么需要小提琴呢？有时代码片段不起作用，但小提琴起作用。我不知道为什么。
.test {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test" id="test">dog</div>
<input type="text" id="input" />