<div id="box">
<p class="text">滚动位置滚动位置滚动位置滚动位置滚动位置滚动位置滚动位置</p>
<span class="more">显示更多</span>
</div>
#box{
width: 200px;
height: 35px;
overflow: hidden;
position: relative;
}
.text{
margin: 0;
line-height: 35px;
}
.moreText{
position: absolute;
top: 0;
left: 0;
right: 64px;
vertical-align: middle;
cursor: default;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: normal;
}
.more{
position: absolute;
top: 0;
right: 0;
line-height: 35px;
background: #FFFFFF;
display: none;
}
<script src="jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
if($(".text").height()>$("#box").height()){
$(".more").show();
$(".text").addClass("moreText");
}
$(document).on("click",".more",function(){
$(".text").removeClass("moreText");
$("span").hide();
$("#box").css("height","auto")
})
})
</script>