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 开头删除（保存）字符

sn-p（在演示中我使用了不同的 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>

Answer 2

如果没有看到您的 HTML/CSS，就很难为您的具体情况提供解决方案。

如您所知，您的文本是换行的，这会导致 div 的高度增加。

您可以使用其中一些 CSS 属性来为您的案例找到正确的解决方案：

height:30px（即固定高度），

width:200%（即不会换行的宽度），

overflow:hidden（在使用固定高度时隐藏溢出的文本）

/*
In the example below, you need the `#container` div so that you can use `overflow:hidden` on it -- to suppress the horizontal scrollbar. Without this div (and its overflow:hidden css instruction) the horizontal scrollbar will appear on the body - and that is more difficult to suppress.

*/

#container{overflow:hidden;}

#normal{background:wheat;margin-bottom:20px;}

#allowOverflow {position:relative;left:-400%;width:500%;height:25px;overflow:hidden;text-align:right;background:palegreen;}

<div id="container">
<div id="normal">
Once upon a midnight dreary, While I pondered weak and weary, Over many a quaint and curious volume of forgotten lore. While I nodded, nearly napping, suddenly there came a tapping - as of someone gently rapping - rapping on chamber door. 'Tis some visitor, I muttered, rapping on my chamber door. Merely that and nothing more.
</div>

<div id="allowOverflow">
Once upon a midnight dreary, While I pondered weak and weary, Over many a quaint and curious volume of forgotten lore. While I nodded, nearly napping, suddenly there came a tapping - as of someone gently rapping - rapping on chamber door. 'Tis some visitor, I muttered, rapping on my chamber door. Merely that and nothing more.
</div>
</div>