工作需要筆記

<div class="newsItemTitle">
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
<div class="newsItemBox">                        
    <div class="newsItemContent">
		<asp:Label ID="Label1_1" runat="server" Text="Label"></asp:Label>
	</div>
    <div class="newsItemReadAll">
		<asp:HyperLink ID="HyperLink1" runat="server">　　...《完整閱讀》</asp:HyperLink>
	</div>
</div>

.newsItemBox {
    z-index:1;
    position: relative;
    top: 0;
    left: 0;
    float: left;
    width: 565px;
    height: 80px;
}
.newsItemContent {
    z-index:1;
    position: relative;
    top: 0;
    left: 0;
    padding: 5px 0 0 5px;
    float: left;
    width: 565px;
    height: 80px; /*95px;*/
    line-height: 20px;
    font-size: 12px;
    font-family: 新細明體;
    color: #e5e5e5;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
    text-align:justify;
    overflow:hidden;
}
.newsItemReadAll {
    z-index:888;
    position: relative;
    top: -21px;
    left: 446px;
    padding: 5px 0 0 5px;
    float: left;
    width: 120px;
    height: 12px; /*95px;*/
    font-size: 12px;
    font-family: 新細明體;
    text-align:right;
    vertical-align:bottom;
    color: #ff6a00;
    background-image: -ms-linear-gradient(left, rgba(0,0,0,0) 8%, rgb(0,0,0,0) 20%);

    /* Mozilla Firefox */ 
    background-image: -moz-linear-gradient(left, rgba(0,0,0,0) 8%, rgb(0,0,0,0) 20%);

    /* Opera */ 
    background-image: -o-linear-gradient(left, rgba(0,0,0,0) 8%, rgb(0,0,0,0) 20%);

    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, left, right, color-stop(0, rgba(0,0,0,0)), color-stop(1, rgb(0,0,0)));

    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 8%,rgb(0,0,0) 20%);

    /* W3C Markup, IE10 Release Preview */ 
    background-image: linear-gradient(to right, rgba(0,0,0,0) 8%, rgb(0,0,0) 20%);
}

http://jsfiddle.net/Cople/DrML4/5/

http://c7sky.com/text-overflow-ellipsis-on-multiline-text.html

$(".figcaption").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)(\.\.\.)?$/, "..."));
};
});

.figcaption {
background: #EEE;
width: 410px;
height: 3em;
margin: 1em;
}
.figcaption p {
margin: 0;
line-height: 1.5em;
}