html:

單行
<div class="box aa"> 
  Query是一個快速、簡潔的JavaScript框架，是繼Prototype之后又一個優秀的JavaScript代碼庫（或JavaScript框架）。 
</div>
<br>
<br>

多行方法1
<div class="box bb"> 
  Query是一個快速、簡潔的JavaScript框架，是繼Prototype之后又一個優秀的JavaScript代碼庫（或JavaScript框架）。Query是一個快速、簡潔的JavaScript框架，是繼Prototype之后又一個優秀的JavaScript代碼庫（或JavaScript框架）。Query是一個快速、簡潔的JavaScript框架，是繼Prototype之后又一個優秀的JavaScript代碼庫（或JavaScript框架）。
 </div>

<br>
<br>


多行方法2
<div class="ellips">
  <div class="dot">...</div>div relative定位定高定寬，內部放個個浮動層浮動在右下角字
</div>

css:

.box {
    width:300px;
    height:20px;
    padding:10px;
    border:1px solid #424242;
    line-height:24px
}
.aa {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.bb {
    height:65px;
    overflow:hidden;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
}
.ellips {
    position:relative;
    width:100px;
    height:60px;
    line-height:20px;
    overflow:hidden;
    background:#fff
}
.ellips .dot {
    position:absolute;
    right:0px;
    bottom:0px;
    height:20px;
    background:#fff
}