css中如何使鼠标经过过长文字(溢出部分已隐藏为省略号)时全部显示下划线(包括省略号在内)，如图所示：
目前只能做到使鼠标经过时文字下面显示下划线，而省略号下面弄不到，急求高手帮忙，谢谢！！
有点麻烦，有几个问题：
用css的text-overflow: ellipsis;显示省略号IE貌似很好，但FF这贱狐狸精和其他某些贱浏览器不支持，只有用xxx:after{content:"...";}来添加省略号。网上还有种方法是加个span里面用三个点的背景图来模拟省略号，而你上传的图应该是ps的你想要的效果，但看不出来你是通过什么方式弄的省略号出来？
这个问题我没写代码在几个浏览器下实测，只是脑袋里面大概想了下，估计要是用text-decoration下划线的方式来搞定几大内核，同时实现a:hover状态链接和省略号都带下划线有可能做不到。
你只有试试把a定义成display:block块级元素后看省略号的点范围是不是算在块的长度里面的，是的话就好办，用1px的横线背景图(长度刚好跟省略号长度一样)来实现。当a:hover时出现这个背景图居下、右对齐不重复就行了。
如果a定义块级后，省略号不是算在块里面的，基本上纯css你的问题是无解了，你只有考虑结合js。
另外你这个要求本身意义不大，这种无关紧要的小细节不必花时间去搞
用css的text-overflow: ellipsis;显示省略号IE貌似很好，但FF这贱狐狸精和其他某些贱浏览器不支持，只有用xxx:after{content:"...";}来添加省略号。网上还有种方法是加个span里面用三个点的背景图来模拟省略号，而你上传的图应该是ps的你想要的效果，但看不出来你是通过什么方式弄的省略号出来？
这个问题我没写代码在几个浏览器下实测，只是脑袋里面大概想了下，估计要是用text-decoration下划线的方式来搞定几大内核，同时实现a:hover状态链接和省略号都带下划线有可能做不到。
你只有试试把a定义成display:block块级元素后看省略号的点范围是不是算在块的长度里面的，是的话就好办，用1px的横线背景图(长度刚好跟省略号长度一样)来实现。当a:hover时出现这个背景图居下、右对齐不重复就行了。
如果a定义块级后，省略号不是算在块里面的，基本上纯css你的问题是无解了，你只有考虑结合js。
另外你这个要求本身意义不大，这种无关紧要的小细节不必花时间去搞
温馨提示：内容为网友见解，仅供参考
第1个回答 推荐于2016-05-07
下面的做法可以给您一些提示
<a href="news" id="mynews">古古怪怪给刚刚反反复复方法快快快太容易</a>
<script type="text/javascript">
function substrTitle() { //对链接中的长文字进行截取
var oa=document.getElementById('mynews');
if (trim(oa.innerHTML).length >12 ) {
var str = trim(oa.innerHTML).substr(0, 10);
oa.innerHTML = str + '...';
}
}
function trim(str) {
return str.replace(/(^\s*)|(\s*$)/g, "");
}
</script>本回答被提问者采纳
<a href="news" id="mynews">古古怪怪给刚刚反反复复方法快快快太容易</a>
<script type="text/javascript">
function substrTitle() { //对链接中的长文字进行截取
var oa=document.getElementById('mynews');
if (trim(oa.innerHTML).length >12 ) {
var str = trim(oa.innerHTML).substr(0, 10);
oa.innerHTML = str + '...';
}
}
function trim(str) {
return str.replace(/(^\s*)|(\s*$)/g, "");
}
</script>本回答被提问者采纳
第2个回答 2013-05-03
多套一层span a:hover span 试试吧在span上做省略号
相似回答
