您当前位于：
HTML+CSS ——> table表格中text-overflow的问题以及解决办法
table表格中text-overflow的问题以及解决办法
2015/07/27 20:50:36
|
作者：HTML5学堂（码匠）
|
分类：HTML+CSS
|
关键词：table,text-overflow,代码失效
table使用text-overflow后失效的解决方法
HTML5学堂：table使用text-overflow后失效的解决方法。CSS实现文本超出显示省略号这个效果相信大家已经是司空见惯了。今天在给学生做项目辅导的时候遇到了一个问题，在table里面text-overflow: ellipsis居然失效，所以今天给大家分享如何解决该问题。
欢迎沟通交流~HTML5学堂
text-overflow应用到table上
-
<!doctype html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>HTML5Course - HTML5学堂</title>
-
<link rel="stylesheet" href="css/reset.css">
-
<style>
-
.wrap table td {
-
overflow: hidden;
-
width: 100px;
-
white-space: nowrap;
-
text-overflow: ellipsis;
-
}
-
</style>
-
</head>
-
<body>
-
<div class="wrap">
-
<table border="1">
-
<tbody>
-
<tr>
-
<td>HTML5学堂http://www.h5course.com/</td>
-
<td>HTML5学堂http://www.h5course.com/</td>
-
<td>独行冰海http://blog.163.com/hongshaoguoguo@126/</td>
-
<td>梦幻雪冰http://m18050905128.blog.163.com/</td>
-
</tr>
-
<tr>
-
<td>HTML5学堂http://www.h5course.com/</td>
-
<td>HTML5学堂http://www.h5course.com/</td>
-
<td>独行冰海http://blog.163.com/hongshaoguoguo@126/</td>
-
<td>梦幻雪冰http://m18050905128.blog.163.com/</td>
-
</tr>
-
</tbody>
-
</table>
-
</div>
-
</body>
-
</html>
text-overflow应用到table上的效果
为什么text-overflow在table上就失效了？
由于table-layout的默认值是auto，即table的宽高将取决于其内容的多少，如果内容的宽高无法预测，那么最终表格的呈现样式也无法保证了，我们只要设置fixed一下就好了。
解决text-overflow在table失效的方法
-
<!doctype html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>HTML5Course - HTML5学堂</title>
-
<link rel="stylesheet" href="css/reset.css">
-
<style>
-
.wrap table{
-
/*设置表格的宽度*/
-
width: 400px;
-
/*设置表格布局算法：*/
-
table-layout:fixed;
-
}
-
.wrap table td {
-
overflow: hidden;
-
white-space: nowrap;
-
text-overflow: ellipsis;
-
}
-
</style>
-
</head>
-
<body>
-
<div class="wrap">
-
<table border="1">
-
<tbody>
-
<tr>
-
<td>HTML5学堂http://www.h5course.com/</td>
-
<td>HTML5学堂http://www.h5course.com/</td>
-
<td>独行冰海http://blog.163.com/hongshaoguoguo@126/</td>
-
<td>梦幻雪冰http://m18050905128.blog.163.com/</td>
-
</tr>
-
<tr>
-
<td>HTML5学堂http://www.h5course.com/</td>
-
<td>HTML5学堂http://www.h5course.com/</td>
-
<td>独行冰海http://blog.163.com/hongshaoguoguo@126/</td>
-
<td>梦幻雪冰http://m18050905128.blog.163.com/</td>
-
</tr>
-
</tbody>
-
</table>
-
</div>
-
</body>
-
</html>
最终效果
欢迎沟通交流~HTML5学堂
阅读：759
极客编程技术分享
