手机页面编写自动宽度文字内容不换行超出部分隐藏，css，js都可以！高分悬赏
之前没做过手机网页，手机页面一个列表，横屏竖屏自适应宽度。li里面左边一张图片，中间是信息，右边是按钮。中间部分宽度自适应，超出部分文字不换行隐藏，或者自动换行隐藏第二行...
之前没做过手机网页，手机页面一个列表，横屏竖屏自适应宽度。li里面左边一张图片，中间是信息，右边是按钮。中间部分宽度自适应，超出部分文字不换行隐藏，或者自动换行隐藏第二行也行。
<ul>
<li>
<a>
<div><img src=""></div>
<div>
<div>手机页面一个列表，横屏竖屏自适应宽度。li里面左边一张图片，中间是信息，右边是按钮。</div>
<div>内容二</div>
<div>内容三</div>
</div>
<div>按钮</div>
</a>
</li>
</ul>
解决了再加50分 展开
<ul>
<li>
<a>
<div><img src=""></div>
<div>
<div>手机页面一个列表，横屏竖屏自适应宽度。li里面左边一张图片，中间是信息，右边是按钮。</div>
<div>内容二</div>
<div>内容三</div>
</div>
<div>按钮</div>
</a>
</li>
</ul>
解决了再加50分 展开
4个回答
展开全部
<ul class="news-list">
<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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>弹性布局</title>
<style>
div,ul,li,a{-webkit-box-sizing:border-box;}
ul,li{list-style: none;}
.list{font-size:14px;height: 100px;overflow: hidden;}
.list-block{
display:-moz-box;
display:-webkit-box;
display:box;
text-decoration: none;
color:#red;
font-weight: bold;
line-height: 1.5;
}
.left{width:100px;}
.left img{max-width: 100%;height: auto;}
.center{
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
overflow: hidden;
}
.right{width:50px;}
</style>
</head>
<body>
</body>
</html>
<ul class="list">
<li>
<a href="#" class="list-block">
<div class="left"><img src="data3.jpg"></div>
<div class="center">
<div>手机页面一个列表，横屏竖屏自适应宽度。li里面左边一张图片，中间是信息，右边是按钮。</div>
<div>内容二</div>
<div>内容三</div>
</div>
<div class="right">按钮</div>
</a>
</li>
</ul>
直接上代码了，你看一下吧，主要使用的是css3的box-flex弹性布局
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
给div加个百分比的宽 再给个高度，然后overflow :hidden
更多追问追答
追问
不行，我最开始就是这样写的，不是绝对宽度，overflow :hidden没有用
追答
不会啊，你高度加了吗
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
white-space:nowrap;
强制不换行
强制不换行
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
