css 控制内容过长多余的...显示

studyhk 2011-05-31 11:19:15

数据库读取的一些数据过长，影响美观，能不能用css或者别的控制数据显示，当内容过长的部分用省略号显示，然后鼠标移到省略号时显示剩余部分。。。

谢谢各位大侠多多帮忙哈

...全文

348 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

LXQYYH 2011-06-09

打赏
举报

一个小列子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
ul{margin:0px; padding:0px;}
ul li{margin:0px; padding:0px;
list-style:none;color:#933;
width:165px;cursor:pointer;
cursor:hand;overflow:hidden; display:block;
white-space:nowrap;text-overflow:ellipsis;
-o-text-overflow:ellipsis;font-size:12px;
text-decoration:underline; line-height:20px; border:1px solid red; }
</style>
<script type="text/javascript" language="javascript" src="js/jquery-1.4.4.min.js"></script>
<script language="javascript" type="text/javascript" src="js/LiIgnoreText.js"></script>
</head>

<body>
<div>
<ul>
<li>web标准常见问题大全web标准常见问题大全</li>
<li>web标准常见问题大全web标准常见问题大全</li>
<li>为所有图像设置src和alt属性.</li>
<li>页面卸载的时候弹出一个警告框.</li>
</ul>
</div>
</body>
</html>
js如下:
$(document).ready(
function(){
$('ul li').hover(function()
{
$(this).css('white-space','normal');
$(this).css('width','300');
},function()
{
$(this).css('white-space','nowrap');
$(this).css('width','165px');
})

}
)

qider 2011-06-08

打赏
举报

引入jquery包，这样实现，但是如果省略号后面还有内容，那就会影响网页的布局，还是用弹出窗口显示比较好。
<script>
$(document).ready(function(){
var s=$("#string");
var string=s.html();
if(string.length>10){
var a=string.substring(0,5)+"<span>...</span>";
s.html(a);
s.mouseover(function(){
s.html(string);
});
s.mouseout(function(){
s.html(a);
});
}
});
</script>
<span id="string">诺维茨基克服发烧影响得到21分，他在第四节送出一记关键上篮，钱德勒用13分和16个篮板统治内线，米勒错失最后可能扳平比分的压哨三分，小牛队末节逆转热火队扳为2平。</span>

baicaocao 2011-06-05

打赏
举报

我觉得还是用js比较合适。。。

lotush 2011-06-05

打赏
举报

javascript啊。思路：
$(function(){if($("string").length>xx){function(){all = $("string").html();a=substring()+"<span id = 'apos'>....</span>";$("string").html(a);$("string").hover(function(){$sting.html(all);}}}}