您好,UncleToo欢迎您!  为了更好的浏览本站,请使用高版本浏览器
RSS  Tag     设为首页 | 加入收藏
 您所在的位置:首页 > 前端开发 > HTML5&CSS3

对象内文本溢出时显示省略号

作者:UncleToo  来源:原创  日期:2013-12-09 7:35:37
收藏  评论:( 0 )  阅读:527

随着WEB APP的流行,越来越多的网站都有自己的APP,特别是响应式设计的需要,我们都要根据不同类型客户端将内容尽量完整友好的展示出来,最常见的方式就是将超出容器范围部分的内容以省略号(...)的形式展示

预览效果

实现这种效果我们可以采用如下两种方式:

方法一:利用CSS

CSS代码:

<style type="text/css">
div {
    width:280px;
    height:20px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    }
</style>

HTML代码:

<body>
<div>1、windows环境下 PHP连接Oracle数据库</div>
<div>2、微信开放各项免费接口:将可调用腾讯地图街景API</div>
<div>3、PHP:点击PDF文件是下载而不是直接打开的方法</a></div>
<div>4、mysql中replace into与oracle中merge into对比</div>
</body>

显示效果:

1、windows环境下 PHP连接Oracle数...

2、微信开放各项免费接口:将可调...

3、PHP:点击PDF文件是下载而不是...

4、mysql中replace into与oracle中...


方法二:使用Jquery

使用这种方法前,页面必须要引入Jquery文件。

示例代码:

javascript代码:

<script language="javascript">
$(document).ready(function(){ 
        $(".cnt").each(function(i){ 
        var divH = $(this).height(); 
        var $p = $("p", $(this)).eq(0); 
        while ($p.outerHeight() > divH) { 
            $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "...")); 
        }; 
    }); 
});
</script>

CSS代码:

<style type="text/css">
.cnt { 
    text-align: left; 
    margin-left: 10px; 
    margin-right: 10px; 
    height: 52px; 
  width:230px; 
    overflow:hidden;
} 
</style>

HTML代码:

<body>
<div class="cnt"><p>UncleToo(www.uncletoo.com)是一档以PHP技术为主,数据库技术、前端技术为辅的PHP中文门户,致力于PHP技术推广及PHP移动开发。我们遵循PHP开源理念,力求为PHPer提供一个在线学习、互动的优秀平台。</p></div> 
</body>

显示效果:

UncleToo(www.uncletoo.com)

是一档以PHP技术为主,数据...


本文由UncleToo原创,转载请注明出处!




除非特别声明,本站所有PHP教程及其他教程/文章均为原创、翻译或网友投稿,版权均归UncleToo中文网所有, 转载请注明作者及出处。
原文网址:http://www.uncletoo.com/html/html5/724.html
读完这篇文章后,你是否有所收获? 分享是一种生活的信念!
  • 0
  • 0
我来说两句
更多>>网友评论