如何让html中的td文字只显示部分
1个回答
展开全部
首先设置表格的样式table-layout："fixed"再设置表格的宽度（这步必须） ，
这条属性就是让table的内部布局固定大小。
最后再设置td样式的三个必要属性
样式代码如下:
text-overflow: ellipsis;
white-space:
nowrap;
overflow: hidden;
在table中必须设置style:
table-layout: fixed;
<style>
td {
white-space:nowrap;overflow:hidden;text-overflow: ellipsis;
}
</style>
属性描述
white-space:nowrap;规定段落中的文本不进行换行
overflow:hidden;关闭滚动条
text-overflow: ellipsis;溢出的文字显示为省略号
这个时候你会发现，就算变成了省略号，就会出现不知道内容完整的是什么？
所以这个时候可以考虑使用td的title属性，在title属性中设置内容为显示内容，这样只要光标停留在td处就可以显示全部的内容，换行也需要table-layout: fixed;
方法为：同时加入word-wrap:break-word;
table{
table-layout:fixed;word-wrap:break-word;
}
</style>
整个html代码为：
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
table {
width:450px;
table-layout:fixed;
}
td {
white-space:nowrap;
overflow:hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" >
<tr>
<th style="width:200px;"><strong>FFF</strong></th>
<th style="width:250px;"><strong>MMM</strong></th>
</tr>
<tr>
<td>FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF</td>
<td>MMMMMMMM</td>
</tr>
</table>
</body>
</html>
效果图为：
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
