元素与多行文本，我如何溢出他们向上？ [英] Element with multiple lines of text, how can I overflow them upwards?

问题描述

http://jsbin.com/dodiha/1/edit？ html，css，js，输出

所以基本上我有一个log元素显示最近的消息。默认情况下，它是折叠的，只有1行高。你可以将鼠标悬停在它上面，使其更高。关键是它被锚定到页面的底部。当我添加文本时，我想看到它，而不是第一行。

这是什么样子：

  --------------- 
 |第一行| visible 
 --------------- 
 |第二行| hidden 
 |第三行| hidden 
  

这就是我想要的样子：

  |第一行| hidden 
 |第二行| hidden 
 --------------- 
 |第三行| visible 
 --------------- 
  

I 've试过每个变体的vertical-align希望它将正确定位文本。显然，我可以做prepend而不是append，它适用于折叠视图，但然后当我展开日志窗口消息是按时间顺序的倒序。想象它像一个命令提示符，其中最近的消息在底部，顶部消失，但您可以向上滚动查看历史。

  function log（m）{$（'＃log'）。append（'< div>'+ m +'< / div>'）} $（＃add）。on （'click'，function（）{log（New Entry Added ...）}）$（'＃log'）。hover（function（）{$（'＃log'）。animate ：200px}）}，function（）{$（'＃log'）。animate（{height：30px}）}） 。'）}） 

  #log {position：absolute; bottom：100px; left：5px; right：5px;背景颜色：lightgray; height：30px; line-height：30px; font-size：20px; padding-left：10px; overflow：hidden; float：bottom;}  

 < script src = /code.jquery.com/jquery-2.1.1.min.js\"> ;</script> ;<div id =log>< / div>< button id =add>添加
解决方案
 

http://jsfiddle.net/zwvgfkjo/

HTML：

 < div id =log> 
< div class =wrapper> 
< / div> 
< / div> 
< button id =add>添加条目< / button> 
  

CSS：

 code> .wrapper {
 position：absolute; 
 left：0; 
 bottom：0; 
} 
 
 #log {
 position：absolute; 
 bottom：100px; 
 left：5px; right：5px; 
 background-color：lightgray; 
 height：30px; 
 line-height：30px; 
 font-size：20px; 
 padding-left：10px; 
 overflow：hidden; 
 float：bottom; 
} 
  

JS：

  function log（m）{
 $（'＃log .wrapper'）。append（'< div>'+ m +'< / div>'） 
} 
 
 $（＃add）。on（'click'，function（）{
 log（New Entry Added ...）
 }; 
 
 $（'＃log'）。hover（
 function（）{
 $（'＃log'）。animate（{height：200px }）
}，
 function（）{
 $（'＃log'）。animate（{height：30px}） 
 
 $（document）.ready（function（）{
 log（'Document Ready。'）
 
}）
  

http://jsbin.com/dodiha/1/edit?html,css,js,output

So basically I have a "log" element that shows recent messages. By default, it is collapsed and only 1 line-height high. You can hover over it to make it taller. The key is that it's anchored to the bottom of the page. When I append text, I want to see it, not the first line.

So this is what it looks like:

---------------
| first line  |  visible
---------------
| second line |  hidden
| third  line |  hidden

And this is what I want it to look like:

| first  line |  hidden
| second line |  hidden
---------------
| third line  |  visible
---------------

I've tried every variant of "vertical-align" hoping that it would orient the text properly. Obviously I can do prepend instead of append and it works for the collapsed view, but then when I expand the log window the messages are in reverse chronological order. Think of it like a command prompt where the most recent messages are on the bottom and the top ones disappear but you can scroll up to see the history.

function log(m) {
  $('#log').append('<div>' + m + '</div>')
}
  
$("#add").on('click',function() {
  log("New Entry Added...")
})

$('#log').hover(
  function() {
        $('#log').animate({"height":"200px"})
  },
  function() {
    $('#log').animate({"height":"30px"})
  }
)

$(document).ready(function() {
  log('Document Ready.')
  
})

#log {
  position: absolute;
  bottom: 100px;
  left: 5px; right: 5px;
  background-color: lightgray;
  height: 30px;
  line-height: 30px;
  font-size: 20px;
  padding-left: 10px;
  overflow: hidden;
  float: bottom;
}

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<div id="log"></div>
<button id="add">Add Entry</button>

解决方案

Here's a simple way with minimal code change

Demo http://jsfiddle.net/zwvgfkjo/

HTML:

  <div id="log">
    <div class="wrapper">
    </div>
  </div>
  <button id="add">Add Entry</button>

CSS:

.wrapper {
    position: absolute;
    left: 0;
    bottom: 0;
}

#log {
  position: absolute;
  bottom: 100px;
  left: 5px; right: 5px;
  background-color: lightgray;
  height: 30px;
  line-height: 30px;
  font-size: 20px;
  padding-left: 10px;
  overflow: hidden;
  float: bottom;
}

JS:

function log(m) {
  $('#log .wrapper').append('<div>' + m + '</div>');
}

$("#add").on('click',function() {
  log("New Entry Added...")
})

$('#log').hover(
  function() {
    $('#log').animate({"height":"200px"})
  },
  function() {
    $('#log').animate({"height":"30px"})
  }
)

$(document).ready(function() {
  log('Document Ready.')

})

这篇关于元素与多行文本，我如何溢出他们向上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！