元素具有多行文本,如何将它们向上溢出
Element with multiple lines of text, how can I overflow them upwards?
http://jsbin.com/dodiha/1/edit?html,css,js,输出
因此,基本上我有一个"日志"元素来显示最近的消息。默认情况下,它是折叠的,只有1行高。你可以将鼠标悬停在它上面使它更高。关键是它被锚定在页面的底部。当我附加文本时,我希望看到它,而不是第一行。
这就是它的样子:
---------------
| first line | visible
---------------
| second line | hidden
| third line | hidden
这就是我想要的样子:
| first line | hidden
| second line | hidden
---------------
| third line | visible
---------------
我试过"垂直对齐"的每一种变体,希望它能正确地定位文本。很明显,我可以进行prepend而不是append,它适用于折叠的视图,但当我展开日志窗口时,消息是按相反的时间顺序排列的。把它想象成一个命令提示符,最新的消息在底部,顶部的消息消失,但你可以向上滚动查看历史记录。
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.')
})
试试这个:
<div id="log-wrapper">
<div id="log"></div>
</div>
#log {
position: absolute;
bottom: 0;
}
function log(m) {
$('#log').append('<div>' + m + '</div>')
}
$("#add").on('click',function() {
log("New Entry Added...")
})
$('#log-wrapper').hover(
function() {
$('#log-wrapper').animate({"height":"200px"})
},
function() {
$('#log-wrapper').animate({"height":"30px"})
}
)
$(document).ready(function() {
log('Document Ready.')
})
#log-wrapper {
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;
}
#log {
position: absolute;
bottom: 0;
}
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<div id="log-wrapper">
<div id="log"></div>
</div>
<button id="add" type="button">Add Entry</button>
相关文章:
- 表单输入字段随着溢出的文本而增长
- 高图表的文本溢出问题
- 如何检查浏览器中是否支持文本溢出:省略号
- 溢出的输入文本
- 当屏幕大小为中或小或xs时,文本溢出,会弄乱整个表.不过,它在全屏模式下运行良好
- 在移动设备领域,空白:nowrap;溢出:隐藏;文本溢出:省略号;有点不起作用
- 在 AngularJS Material Design 中,如何在“md-toolbar”中隐藏溢出的文本
- 如何添加类似于堆栈溢出系统的标签文本输入系统
- 隐藏溢出隐藏的零件视图文本
- 溢出隐藏不会文本换行
- 我的拉斐尔“文本溢出:省略号”实现插件是矫枉过正吗?
- JavaScript 检查链接内的文本锚文本是否溢出
- 仅在必要时对文本进行连字符,以防止容器溢出
- 检测文本溢出:省略号在输入字段上是否处于活动状态
- 隐藏文本块的开头,溢出:隐藏
- 剑道工具栏更新溢出文本
- 动画滚动与溢出文本
- 显示溢出文本的Jquery效果<鼠标悬停时的菜单元素
- 检查溢出文本位置
- 如何溢出文本而不是在元素中换行