文字在超出長度時,如何實現用省略號代替?
用CSS實現超長字段用省略號表示的方法:所有瀏覽器兼容!
html代碼如下:
<div style="width:150px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis">用CSS實現超長字段被省略的簡單方法</div>
鼠標移入移出顯示和隱藏
html:
<div class="relaDiv">
<div style="width:120px;overflow:hidden; white-space:nowrap;
text-overflow:ellipsis; color:black" class="mouseOver">
<span class="tit f_bold">外呼原因:</span>${order.oper_remark }
</div>
<div class="absoDiv">
<div class="absoDivHead">外呼原因</div>
<div class="absoDivContent">
<span class="tit f_bold">外呼類型:</span>${order.outcall_type_c }<br/>
<span class="tit f_bold">外呼原因:</span>${order.oper_remark }
<c:if test="${empty order.oper_remark }">無原因</c:if>
</div>
</div>
</div>
css:
<style>
.relaDiv {
position: relative;
height: 30px;
line-height: 30px;
}
.absoDivHead {
border-bottom: 1px solid #d5d5d5;
background: #dbdbdb;
line-height: 20px;
text-align: left;
margin: 0px;
padding-left: 5px;
font-weight: bold;
}
.absoDivContent {
padding: 5px;
}
.absoDiv {
position: absolute;
display: none;
line-height: 20px;
width: 350px;
top: 24px;
left: 0px;
height: auto;
border: 1px solid #d5d5d5;
background: #fff;
z-index: 100;
background: #FCFCE4;
text-align: left;
}
</style>
js:
function showOrg(item){
var row = $(item).closest("tr");
var orgDiv = $(row).find(".absoDiv");
var orgContent = $(row).find(".absoDivContent");
$(orgDiv).attr("style","display:block");
}
function hideOrg(item){
var row = $(item).closest("tr");
$(row).find(".absoDiv").attr("style","display:none");
}