http://jsbin.com/dodiha/1/edit?html,css,js,output
所以基本上我有一个显示最近消息的“日志”元素。默认情况下,它是折叠的并且只有 1 行高。您可以将鼠标悬停在它上面以使其更高。关键是它锚定在页面底部。当我附加文本时,我想看到它,而不是第一行。
这就是它的样子:
---------------
| first line | visible
---------------
| second line | hidden
| third line | hidden
这就是我想要的样子:
| first line | hidden
| second line | hidden
---------------
| third line | visible
---------------
我已经尝试了“vertical-align”的每一种变体,希望它能正确定位文本。显然我可以做前置而不是追加,它适用于折叠 View ,但是当我展开日志窗口时,消息按时间倒序排列。可以把它想象成一个命令提示符,最近的消息在底部,顶部的消息消失,但您可以向上滚动以查看历史记录。
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>
最佳答案
这是一种代码更改最少的简单方法
演示 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.')
})
关于javascript - 包含多行文本的元素,如何向上溢出?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26245206/