文字超出隐藏显示省略号

单行文本

[编辑]demo

.ellipsis1{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
<div class="ellipsis1">
单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏
单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏
</div>

[编辑]注意

text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。

[编辑

[编辑]多行文本

[编辑]针对某个浏览器的做法

[编辑]chrome

在新版的chrome中有一个属性-webkit-line-camp属性，它允许你指定特定行数省略。

.ellipsis-more-webkit{
    width:100%;
    height: 50px;
    line-height: 25px;
    display: -webkit-box;
    -webkit-line-clamp: 2;/*行数*/
    -webkit-box-orient: vertical; /* 方向 */
    overflow: hidden;
}
<div class="ellipsis-more-webkit">
两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏
且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号，两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号
两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号
    </div>

[编辑]opera

在opera浏览器中，也有一个支持属性，即text-overflow:-o-ellipsis-lastline，它能识别超出容器的最后一行作省略。

.ellipsis-more-opera{
    width:100%;
    height: 50px;
    line-height: 25px;
    text-overflow:-o-ellipsis-lastline;
    overflow: hidden;
}
<div class="ellipsis-more-opera">
两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏
且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号，两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号
两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号
    </div>

[编辑]通用方法

[编辑]纯css,支持IE9+,firefox,chrome等

.ellipsis {
    overflow: hidden;
    height: 100px;
    line-height: 25px;
    margin: 20px;
    border: 5px solid #AAA; 
}
.ellipsis:before {
    content:"";
    float: left;
    width: 5px; height: 100px; 
}
.ellipsis > *:first-child {
    float: right;
    width: 100%;
    margin-left: -5px; 
}        
.ellipsis:after {
    content: "\02026";  
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    float: right; 
    position: relative;
    top: -25px; 
    left: 100%; 
    width: 3em; 
    margin-left: -3em;
    padding-right: 5px;  
    text-align: right;
    /*根据背景颜色更改渐变颜色*/
    background: -webkit-gradient(linear, left top, right top,
        from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);            
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); 
}
<div class="ellipsis">
   <p>I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,
I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,
I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,
I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,
I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,
I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,
I want to hide,</p>    
</div>

[编辑]css+jquery 主流浏览器都支持

.ellipsis-more{
    width: 100%;
    height: 50px;
    overflow: hidden;
    line-height: 25px;
}
<div class="ellipsis-more">
<p>两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后
我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号，两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏
且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号</p>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(".ellipsis-more").each(function(i){
    var divH = $(this).height();
    var $p = $("p", $(this)).eq(0);
    /**一般是2分法截断，但是考虑到文本里分为三种：中文字、英文字、字符；一般来说，中文字=2英文字=2字符。因此最坏情况可能前面一半字符全部是英文，
    后面一半文本全部是中文，这样二分法就会截取到25%的高度，因此考虑到最坏情况，需要3倍才截断**/
    while($p.outerHeight()>=divH*3){
        $p.text($p.text().substring(0,$p.text().length/2));
    }
    while ($p.outerHeight() > divH) {
        $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
    };
});
</script>
<pre>