首页 > 代码库 > table 中 文字长度大于td宽度,导致文字换行 解决方案

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

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长度固定,内容过长,超过部分用省略号代替

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