jQuery的追加文本同時保持高度和隱藏以前的文本

Question

我有這個div，其內容是從jquery的追加（）：

每次文本長度達到的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堆棧）：

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

我可怎麼辦呢？

謝謝。

Answer 1

沒有看到您的HTML/CSS，很難爲您的確切情況提供解決方案。

如您所知，您的文本正在包裹，並導致div增加高度。

您可以使用一些CSS屬性來發現你的情況下正確的解決方案：

高度：30PX（即一個固定的高度），

寬度：200％（即的寬度不會換行），

溢出：隱藏（具有固定高度時隱藏溢出的文字）

/* 
 
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>

Answer 2

我的想法來解決這個問題是：

• 對文檔準備好計算高度並保存爲屬性
• 在追加集之前
• 後，不透明度爲0
• 追加文本50毫秒開始檢查新的高度：雖然它是更大的 原來的開始移除（保存）從DIV

的片段開頭的字符（在演示中，我使用了不同的網址）：

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>