<!-- 小于5行 --> <div class="cont"> <p>当地司法所多发省份发生</p> <a href="javascript:;" class="more">显示全部</a> </div> <!-- 大于5行 --> <div class="cont"> <p>当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生当地司法所多发省份发生</p> <a href="javascript:;" class="more">显示全部</a> </div>
p { margin: 0; } .cont { position: relative; margin-bottom: 20px; width: 11em; max-height: 150px; /* 5行文字高度 */ line-height: 25px; background: #fff; overflow: hidden; } .cont.show { max-height: none; overflow: auto; } .cont.show .more, .cont.show:after, .cont.show:before { display: none } .cont:after { content: '...'; position: absolute; top: 100px; right: 0; width: 1em; background: #fff; } .cont:before, .more { position: absolute; top: 125px; /* 5行文字高度 */ left: 0; } .cont:before { content: ''; width: 100%; height: 25px; /* 1行文字高度 */ background: #fff; z-index: 1; } .more { z-index: 2; }