text-overflow:ellipsis的巧妙运用

关键字: text-overflow:ellipsis
语法：text-overflow : clip | ellipsis

取值：
clip ：默认值。不显示省略标记(…)，而是简单的裁切.
ellipsis：当对象内文本溢出时显示省略标记(…).

可惜text-overflow 还只是ie的私有属性而已，也没被收录到w3c标准里 .

如果想让某个容器（div或者li或者…块级元素）显示一行文字，当文字内容过多时，不换行，而是出现…
这样写：例如
Html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title></title>  
<style type="text/css">  
#box{width:100px;background-color:#87CEEB;padding:2px 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}   
</style>  
</head>  
<body>  
<div id="box">锦江之星旅馆有限公司系亚洲规模最大的综合性旅游企业集团</div>  
</body>  
</html>

注意：overflow: hidden; text-overflow:ellipsis;white-space:nowrap;一定要一起用
1.一定要给容器定义宽度.
2.如果少了overflow: hidden;文字会横向撑到容易的外面
3.如果少了white-space:nowrap;文字会把容器的高度往下撑；即使你定义了高度，省略号也不会出现，多余的文字会被裁切掉
4.如果少了text-overflow:ellipsis;多余的文字会被裁切掉，就相当于你这样定义text-overflow:clip.
如果容器是table，当文字内容过多时，不换行，而是出现…
这样写：例如
Html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title></title>  
<style type="text/css">  
table{table-layout:fixed;width:106px;}   
td{padding:2px 3px;border:1px solid #000;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}   
</style>  
</head>  
<body>  
<table cellspacing="0" cellpadding="0"><tr><td>锦江之星旅馆有限公司系亚洲规模最大的综合性旅游企业集团</td></tr></table></body>  
</html>

注意：
1.一定要给table定义table-layout:fixed;只有定义了表格的布局算法为fixed，下面td的定义才能起作用。
其它的要点和上面一样

text-overflow 的兼容性：
测过ie6，ie7，ff3，safari，opera，chorme，只有ff3和opera不兼容

/**************************************************************************************/

很多时候我们不仅需要实现一行溢出显示省略号，也存在多行溢出需要显示省略号的情况，解决办法如下：

1.WebKit浏览器或移动端的页面

在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ；注意：这是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

扫描二维码关注公众号，回复： 4203654 查看本文章

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。
常见结合属性：

1.display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
2.-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
3.text-overflow: ellipsis;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

这个属性比较合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器。

2.跨浏览器兼容的方案

比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号(…)的元素模拟实现；

p {
    position:relative;
    line-height:1.4em;
    /* 3 times the line-height to show 3 lines */
    height:4.2em;
    overflow:hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    background:url(http://www.uedsc.com/wp-content/uploads/2015/11/ellipsis_bg.png) repeat-y;
}

<p>WebKit Browsers will clamp the number of lines in this paragraph to 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

这里注意几点：

1.height高度最好是line-height的3倍；
2.结束的省略好用了半透明的png做了减淡的效果，或者设置背景颜色；
3.IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用…去模拟；
4.要支持IE8，需要将::after替换成:after；

3.JavaScript 方案

用js也可以根据上面的思路去模拟，实现也很简单，推荐几个做类似工作的成熟小工具：

1.Clamp.js

下载及文档地址：https://github.com/josephschmitt/Clamp.js
使用也非常简单：

var module = document.getElementById("clamp-this-module");
$clamp(module, {clamp: 3});

2.jQuery插件-jQuery.dotdotdot

这个使用起来也很方便：

$(document).ready(function() {
    $("#wrapper").dotdotdot({
        //  configuration goes here
    });
});

下载及详细文档地址：https://github.com/BeSite/jQuery.dotdotdot或http://dotdotdot.frebsite.nl/

text-overflow:ellipsis的巧妙运用

猜你喜欢