您的位置：首页 > 其它

table 中 文字长度大于td宽度，导致文字换行 解决方案

2016-12-15 10:59 190 查看
1.TD不换行 nowrap属性

表格table的td单元格中，文字长了往往会撑开单元格，但是如果table都不够宽了，就换行了好像（不要较真其他情况，我只说会换行的情况）。换行后的表格显得乱糟糟，不太好看，我不喜欢这样的换行。当然可以通过对每列td都设置宽度，那样太麻烦了，并且有时没法预计td中的文字会有多长，没法给固定宽度。

为了让表格里文字不换行（预计也不会太长的字符串），可以给表格里td添加一个nowrap属性，如 <td nowrap>文字内容</td> 这样。

但是如果给每个td都加上nowrap属性，貌似太繁琐并且占用空间和流量。于是乎，我找css的实现方法，不擅长此术，尝试了n多个样式后，找到white-space: nowrap; 貌似跟直接给td加nowrap差不多，那么就可以像下面这样定义样式，即可实现td里不换行，字符串长了就撑宽表格宽度。

<html>
<head>
<title>test</title>
<style type="text/css">
th {
width:90px;
white-space: nowrap;
}
</style>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th>
我是乱七八糟的字符串
</th>
<th>
悟空的博客
</th>
<th>
www.7es.cn
</th>
</tr>
<tr>
<td>
我是乱七八糟的字
</td>
<td>
我很长哦
</td>
<td>
悟空的博客
</td>
</tr>
</table>
</body>
</html>


2.table 中 文字长度大于td宽度，溢出文本用“...”代替

.class1｛
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}


text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。

我们想要实现溢出时产生省略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样才能实现溢出文本显示省略号的效果。

<html>
<head>
<title>test</title>
<style type="text/css">
.mytable {
table-layout: fixed;
width: 400px;
border: 0px;
margin: 0px;
}

.class1 {
text-overflow: ellipsis; /* for IE */
-moz-text-overflow: ellipsis; /* for Firefox,mozilla */
overflow: hidden;
white-space: nowrap;
border: 1px solid;
text-align: left;
}
</style>
</head>
<body>
<table class="mytable" border="1" cellpadding="0" cellspacing="0">
<tr>
<th width="30%" class="class1">测试</th>
<th width="70%" class="class1">测试测试测试测试测试测试测试测试测试测试测试123123</th>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
</tr>
</table>
</body>
</html>


参：

1.TD不换行 nowrap属性

2.table 中 文字长度大于td宽度，溢出文本用“...”代替

3.td长度固定，内容过长，超过部分用省略号代替
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航