javascript - jQuery 在保持高度和隐藏之前的文本的同时追加文本

Question

我有这个 div，它的内容来自 jquery append():

每次文本长度到达 div 宽度的末端时，文本将继续前进并改变 div 的高度。

但我想保持 div 的高度并隐藏以前的文本。另外，我有一个带有渐变的 PNG，当 jquery append 检测到 div 已充满文本时，我想将 png 图像放在左边。

预期结果:

我尝试过的:

1. https://www.sitepoint.com/community/t/how-do-you-put-a-div-without-causing-a-new-line-break/7398/8
2. No Line Break With jQuery .append()

我当前的代码(javascript):

$.post(base_url + "ajax/validate_answer", {'quiz': load, 'answer': answer}, function (data) {

    /* if incorrect answer */
    if (data.answer_details.correct === false)
    {
        $("." + current_did).css("color", "#D05555");
    }

    /* append text with a new word */
    $(".dictionary-stack").append(' &nbsp; &#8226; &#8226; &#8226; &nbsp; <span class="' + data.next_quiz.display.dictionary.did + '">' + data.next_quiz.display.dictionary.ja_kanji + ' ' + data.next_quiz.display.dictionary.ja_roman + ' [' + data.next_quiz.display.dictionary.en_roman + ']</span>');
}

容器的 CSS (.dictionary-stack):

.dictionary-stack
{
    position: absolute;
    bottom:100px;
    width:100%;
    display: block;
    background:#E6E6E6;
    padding: 20px;
    color:#333333;
}

我该怎么做？

谢谢。

Answer 1

我解决这个问题的思路是:

• 在文档准备好后计算高度并保存为属性
• 在追加之前将不透明度设置为 0
• 附加文字
• 50 毫秒后开始检查新高度:当它大于原始开始从 div 的开头删除(保存)字符

片段(对于演示我使用了不同的 url):

var txt = $(".dictionary-stack").text();
var interval;
$(".dictionary-stack").text('a').attr('data-height', $(".dictionary-stack").outerHeight()).text(txt);
$('#myBtn').on('click', function (e) {
  $.get('https://api.github.com/repositories', {'since': 364}, function (data) {
    $(".dictionary-stack").css('opacity', 0);
    $(".dictionary-stack").append(' &nbsp; &#8226; &#8226; &#8226; &nbsp; <span class="' +
                                  data[0].archive_url + '">' +
                                  data[0].archive_url + ' ' +
                                  data[0].archive_url + ' [' +
                                  data[0].archive_url + ']</span>');
    clearTimeout(interval);
    interval = setTimeout(function () {
      while ($(this).outerHeight() > +$(this).attr('data-height')) {
        this.textContent = this.textContent.substr(1);
      }
      $(this).css('opacity', 1);
    }.bind($(".dictionary-stack").get(0)), 50);
  });
});

.dictionary-stack
{
  position: absolute;
  bottom:100px;
  width:100%;
  display: block;
  background:#E6E6E6;
  padding: 20px;
  color:#333333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button type="button" id="myBtn">Load Data</button>
<div class="dictionary-stack"></div>