table内文字一行内显示

来源:互联网 发布:深圳市大数据研究院 编辑:程序博客网 时间:2024/05/22 00:45

/*样式*/

table{display:fixed;width:100%;}

注意table要有宽度属性

针对要一行显示的文字添加样式类inlinetxt

inlinetxt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}



<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{padding:0;margin:0;border:0;}
        table {border-collapse:collapse;border-spacing:0;}
        .content{width:1000px;margin:0 auto;}
        .content table,.content table td{border:1px solid #ddd;}
        .content table{table-layout:fixed;width:100%;}
        .inlinetxt{overflow:hidden;text-overflow:ellipsis;white-space: nowrap;}
    </style>
</head>
<body>
    <div class="content">
        <table>
            <tbody>
                <tr>
                    <td class="inlinetxt">测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</td>
                    <td>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</td>
                    <td>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</td>
                    <td>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</td>
                    <td>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

0 0
原创粉丝点击