1. 程式人生 > >文字內容顯示三行,多餘部分顯示...,點選全部展開

文字內容顯示三行,多餘部分顯示...,點選全部展開

H5 使文字內容顯示三行,多餘部分顯示...,點選全部展開


CSS部分:
.mui-ellipsis-3 {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal!important;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.innerCtn{
text-indent: 1rem;
line-height: 0.8rem;
font-size: 0.5rem;
}

HTML部分
<div class="innerCtn">
<span class="mui-ellipsis-3">《心理遊戲》是由Propaganda Films發行的懸疑電影,由大衛·芬奇執導,邁克爾·道格拉斯、西恩·潘領銜主演,
該片於1997年9月12日在美國上映。該片講述了億萬富翁尼古拉斯在弟弟的指引下,參與了CRS俱樂部的遊戲。</span>
</div>

jQuery部分程式碼:
<script type="text/javascript">
$(function(){//顯示三行 多餘隱藏 點選展開
$('.innerCtn').click(function(){
$(this).children(0).removeClass('mui-ellipsis-3');
});
});
</script>