今天在工作中遇到一个问题,需求要求超出显示区域的内容以省略号显示,鼠标移动到有省略号的记录上时,显示含有完整内容的提示框。刚开始我用的是css的text-overflow:ellipsis加html中的title属性来实现,后来测试时发现此方案在firefox及IE中行不通,因为在firefox和IE中,如果title中含有一长串由数字或字母组成的字符串,并且此字符串一行显示不下时,浏览器会自动截断。此问题目前除了手动添加换行符外没有其他办法,因为我此次的需求内容是动态的不能手动添加换行符,而我用不想在加插件,所以手写了一个提示框根据内容是否省略来提示内容。
1.html
<div id="tipTool" class="tipDiv">
<p id="tipElement"></p>
</div>
<div id="sysAdminDir" class="sysadminRoute title-color">
<span>当前路径:</span>
<span id="sysadminCurRoute"></span>
</div>
#tipTool 提示框–用来显示完整路径
#sysadminCurRoute显示当前路径,如果路径超出显示区域则超出部分以省略号显示
2.css
#sysAdminDir span
{
display: inline-block;
overflow: hidden;
}
#sysadminCurRoute
{
max-width: 820px;
white-space:nowrap;
text-overflow:ellipsis;
}
.tipDiv {
display: none;
max-width: 400px;
border-width: 1px;
z-index:999;
position: absolute;
top: 0px;
left: 0px;
}
#tipElement {
color: #000000;
background-color: rgba(255,255,255,1);
word-wrap:break-word;
}
注意点:
1.#sysadminCurRoute此元素要省略超出显示部分,这个元素显示方式必须是block或inline-block,要有固定宽度或最大宽度,overflow属性为hidden, text-overflow属性ellipsis(超出部分省略),white-space:nowrap(不换行);
2.提示框即tipDiv ,此元素定位要为绝对定位或浮动定位,即要使此元素脱离文档流;
3.提示信息所在元素即#tipElement,此元素需要注意 设置word-wrap为break-word即单词内换行
3.js
window.onload = function(){
$('#sysadminCurRoute').mouseover(function(e){
var scrollWidth = this.scrollWidth;//元素真实宽度
if (scrollWidth >= 820) {
var posX = e.pageX;
var posY = e.pageY + 10;
$('#tipTool').css({'top': posY + 'px','left': posX + 'px','display':'block'});
}
});
$('#sysadminCurRoute').mouseout(function(e){
$('#tipTool').css({'display':'none'});
});
}
$('#sysadminCurRoute,#tipElement').html(showDir);