<li class="list-item">
<div class="item-image">图片</div>
<div class="item-info">手机页面一个列表,横屏竖屏自适应宽度。li里面左边一张图片,中间是信息,右边是按钮。图片和,按钮大小固定对吧。比如,图片宽度80px按钮宽度 40px</div>
<div class="item-btn">按钮</div>
</li>
</ul>
<style type="text/css">
ul.news-list {
margin:0
padding:0
list-style:none
}
li.list-item {
margin:0
padding:0
height:30px
position:relative
}
li.list-item .item-image {
width:80px
height:30px
float:left
background:#c00/*此背景色,让你看效果*/
}
li.list-item .item-info{
margin:0 50px 0 90px/*此处设置中间文本与图片和按钮之间保留10px间距,看需要自己修改*/
height:30px
line-height:30px
white-space:nowrap
overflow:hidden
text-overflow:ellipsis /*此样式超出部分以...代替*/
}
li.list-item .item-btn {
width:40px
height:30px
position: absolute
right:0
top:0
background:#f60/*此背景,让你看效果*/
}
</style>
显示省略号。js隐藏多行显示多行为显示省略号。多行溢出隐藏显示省略号功能的JS实现,在页面重构中,经常需要将过多的内容隐藏而显示部分,在单行文本中实现非常简单,但是在多行文本中,则需要根据实际选择不同的方式显示。用JQUERY 比较好实现 给你需要实现该效果的DIV加上 name="content" 就行 具体代码 看附件
下载后 直接用浏览器打开 里面的100 代表50个汉字 你换成200 就行 然后自己加个dIV 字数少点 就可以看到效果了 下班了 没时间测 应该没问题