CSS+DIV 表格如何让超出5个字符就不再显示了

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/... <!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>DIV+CSS表格效果</title>
<style type="text/css">
* {margin:0;padding:0}
#main {margin:100px 0 0 200px}
#main ul {width:520px;height:165px;list-style:none}
#main li {border-left:1px solid #ccc;border-top:1px solid #ccc;float:left;width:102px;height:33px;text-align:center;line-height:33px}
#main li.b {border-bottom:1px solid #ccc}
#main li.r {border-right:1px solid #ccc}
</style>
</head>

<body>
<div id="main">
<ul>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li class="r">11</li>
<li >测试超过内容显示不显示哦。测试超过内容显示不显示哦。测试超过内容显示不显示哦。测试超过内容显示不显示哦。测试超过内容显示不显示哦。测试超过内容显示不显示哦。</li>
<li>还行吧？</li>
<li></li>
<li></li>
<li class="r">11</li>
<li>上海世博</li>
<li></li>
<li></li>
<li></li>
<li class="r">11</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="r">11</li>
<li class="b">生活更美好</li>
<li class="b"></li>
<li class="b"></li>
<li class="b"></li>
<li class="b r">11</li>
</ul>
</div>
</body>
</html>

如何让表格里面的，字符超过5个，，就会自动不显示后面的，只显示前面几个展开

 我来答

3个回答

#热议# 为什么有人显老，有人显年轻？

6rl
2014-12-31 · TA获得超过704个赞

知道小有建树答主

回答量：580

采纳率：66%

帮助的人：379万

我也去答题访问个人页

关注

展开全部

只能做到固定宽度不显示，字数控制不了，除非你固定字体大小。

<!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>DIV+CSS表格效果</title> 
<style type="text/css"> 
* {margin:0;padding:0} 
#main {margin:100px 0 0 200px} 
#main ul {width:520px;height:165px;list-style:none} 
#main li {border-left:1px solid #ccc;border-top:1px solid #ccc;float:left;width:102px;height:33px;text-align:center;line-height:33px;text-overflow: ellipsis; 
overflow: hidden; white-space: nowrap; } 
#main li.b {border-bottom:1px solid #ccc} 
#main li.r {border-right:1px solid #ccc} 
</style> 
</head> 

<body> 
<div id="main"> 
<ul> 
<li>11</li> 
<li>11</li> 
<li>11</li> 
<li>11</li> 
<li class="r">11</li> 
<li >测试超过内容显示不显示哦。测试超过内容显示不显示哦。测试超过内容显示不显示哦。测试超过内容显示不显示哦。测试超过内容显示不显示哦。测试超过内容显示不显示哦。</li> 
<li>还行吧？</li> 
<li></li> 
<li></li> 
<li class="r">11</li> 
<li>上海世博</li> 
<li></li> 
<li></li> 
<li></li> 
<li class="r">11</li> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
<li class="r">11</li> 
<li class="b">生活更美好</li> 
<li class="b"></li> 
<li class="b"></li> 
<li class="b"></li> 
<li class="b r">11</li> 
</ul> 
</div> 
</body> 
</html>

已赞过 已踩过<

评论收起

匿名用户
2014-12-31

展开全部

超出自动隐藏 英文不断行显示 (必须在块元素内)
overflow:hidden;white-space:nowrap;
而如果希望在文字后面加上个...，就可以使用text-overflow: ellipsis;

本回答被提问者采纳

已赞过已踩过<

你对这个回答的评价是？
评论收起

百度网友9061227
推荐于2017-12-15 · TA获得超过282个赞

知道小有建树答主

回答量：257

采纳率：0%

帮助的人：103万

我也去答题访问个人页

关注

展开全部

overflow:hidden;text-overflow:ellipsis;white-space:nowrap;

追问

放在哪里位置

追答

样式

本回答被网友采纳

已赞过 已踩过<

评论收起

更多回答（1）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

CSS+DIV 表格如何让超出5个字符就不再显示了

其他类似问题

为你推荐：