Question

我有这个div，它的内容来自jquery append（）：

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

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

预期结果：

我一直在尝试：

https://www.sitepoint.com/community/t/how-do-you-put-a-div-without-causing-a-new-line-break/7398/8
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

如果没有看到您的HTML / CSS，很难为您的确切案例提供解决方案。

如您所知，您的文字正在包装，这会导致div的高度增加。

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

高度：30px（即固定高度），

宽度：200％（即不会包裹的宽度），

溢出：隐藏（用于固定高度时隐藏溢出的文本）

＆＃13;

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

＆＃13;

#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;}

＆＃13;

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

＆＃13;

Answer 2

我解决这个问题的想法是：

on document ready计算高度并保存为属性
在将设置不透明度添加到0
追加文字
在50毫秒后开始检查新的高度：当它更大时原始开始从div的开头删除（保存）字符

该片段（演示中我使用了不同的网址）：

＆＃13;

mydict = NewClass()
vars = ['a', 'b', 'c']
for v in vars: 
    setattr(mydict, v, eval(v)) 

mydict.__dict__
{'a': 9, 'b': ['hello', 'world'], 'c': (True, False)}

＆＃13;

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);
  });
});

＆＃13;

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

＆＃13;

jQuery在保持高度和隐藏先前文本的同时附加文本

2 个答案: