文字超出隱藏顯示省略號

單行文本

[編輯]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>