手机页面编写自动宽度文字内容不换行超出部分隐藏,css,js都可以!高分悬赏

JavaScript012

手机页面编写自动宽度文字内容不换行超出部分隐藏,css,js都可以!高分悬赏,第1张

<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>

显示省略号。js隐藏多行显示多行为显示省略号。多行溢出隐藏显示省略号功能的JS实现,在页面重构中,经常需要将过多的内容隐藏而显示部分,在单行文本中实现非常简单,但是在多行文本中,则需要根据实际选择不同的方式显示。

用JQUERY 比较好实现 给你需要实现该效果的DIV加上 name="content" 就行 具体代码 看附件

下载后 直接用浏览器打开  里面的100 代表50个汉字 你换成200 就行 然后自己加个dIV 字数少点  就可以看到效果了 下班了  没时间测 应该没问题