单选文本及多行文本溢出问题

1、单行

HTML:

<span class="col_one_text">测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据</span>

CSS:

.col_one_text{
display: inline-block;
width: 70px;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

2、多行

HTML:

<div id="text_all_outer" class="text-outer">
<a onclick="showAll(this)" class="more">更多</a>
<a onclick="hideAll(this)" class="shouqi">收起</a>
<span class="text_all">
测试数据测试数据测试数据测试数据<br/>
测试数据测试数据测试数据<br/>
测试数据测试数据测试数据<br/>
测试数据测试数据测试数据<br/>
测试数据测试数据测试数据<br/>
测试数据测试数据测试数据<br/>
测试数据测试数据测试数据<br/>
测试数据测试数据测试数据<br/>
测试数据测试数据测试数据<br/>
测试数据测试数据测试数据<br/>
测试数据测试数据测试数据<br/>
测试数据测试数据测试数据<br/>
测试数据测试数据测试数据12<br/>
</span>
</div>

CSS:

.text-outer{
border: 1px solid red;
font-family: "微软雅黑";
font-size: 12px;
display: inline-block;
position:relative;
line-height:16px;/* 3 times the line-height to show 3 lines */
height:48px;
overflow:hidden;
letter-spacing:1px;/*字间距*/
}
.text-outer::after {
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 52px 1px 13px;
background-color: white;
z-index: 1;
}
.addclass{
position:relative;
font-family: "微软雅黑";
line-height:16px;
font-size: 12px;
display: inline-block;
border: 1px solid blue;
}
.addclass::after{
content:"";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 52px 1px 13px;
background-color: white;
z-index: 1;

}
.more,.shouqi{
font-size: 14px;
margin-bottom: 1px;
border-bottom: 1px solid #B89758;
position: absolute;
bottom: 0;
color:#B89758;
z-index: 2;
}
.more{
right: 21px;
}
.shouqi{
right:10px;
}
.shouqi{
display: none;
}
.more:hover,.shouqi:hover{
cursor: pointer;
}

JS:

<script>
//更多
function showAll(obj){
$(obj).hide();
$(obj).next(".shouqi").show();
var text_h = parseInt($(".text_all").css("height"))+16+"px";
$("#text_all_outer").css("height",text_h);
$("#text_all_outer").removeClass("text-outer");
$("#text_all_outer").addClass("addclass");
}
//收起
function hideAll(obj){
$(obj).hide();
$(obj).prev(".more").show();
$("#text_all_outer").css("height","48px");
$("#text_all_outer").removeClass("addclass");
$("#text_all_outer").addClass("text-outer");
}
</script>