在input中实现点点点与当鼠标移上去时显示剩余的…

2018-06-24 00:26:11来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

项目中经常会遇到这个问题,在一个内容框中,由于框的宽度是固定的,但是里面的内容却有很多,那么这个时候需求里就要求第一,多余的字要以点点点的形式隐藏,第二,当鼠标移上去的时候要以title提示的方式显示文本框里的所有内容。实现的方式如下

点点点,文字溢出之前有写到。给文本框添加如下样式

    display:inline-block;   //这个看情况加
    white-space:nowrap;    //必须
    overflow:hidden;     //必须
    text-overflow:ellipsis;    //必须
而title提示则要在input添加以下代码,这样既可实现用title提示文本框中所有内容
<input onmouseover="this.title=this.value">
 
补充:
刚刚发现在ie8中,select用这个方法还不能正常的提示文字,太矫情了,最后修改了半天,写了个函数调用才正常显示
<select onmouseover="selbox($(this))" ></select>
<script>

function selbox(a){
var val = a.val();
a.attr("title",val);
}

</script>
话说这意思不是跟行内式一样样的么?为什么ie8用这个才能显示呢?在ie8中input是可以正常显示的,唯独select不能正常显示,非得这么调用一下才行,有知道是为啥么?

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:浅谈CSS hack(浏览器兼容)

下一篇:优化网站优化网页代码