css表格内容过长换行

最新推荐文章于 2023-06-30 14:13:21 发布

weixin_34184561

最新推荐文章于 2023-06-30 14:13:21 发布

阅读量275

点赞数

原文链接：http://www.cnblogs.com/masita/p/5460777.html

版权

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .table {
            width: 100%;
            max-width: 100%;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>

    <table class="table table-striped">
        <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</td>
            <td>@fat</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
        </tbody>
    </table>

</body>
</html>

在测试的发现了这么一个bug，初次看到头很大很紧张，马上想起来外面套个div不就可以解决他内容过长的问题了，马上加div试试。发现加了div后并不能解决问题，把overflow:hidden加上是可以了，但是他把表格的内容给隐藏掉了，不是这样的效果。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #div1{
            width: 500px;
        }
        .table {
            width: 100%;
            max-width: 100%;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div id="div1">
    <table class="table table-striped">
        <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</td>
            <td>@fat</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
        </tbody>
    </table>
</div>

</body>
</html>

最后发现是换行的问题，在td加上word-break: break-all;这个属性即可，就可以换行了，这个属性还有一个值就是break-word，他跟break-all有什么不同呢？break-word是已单词的空格为换行的点，而break-all是已表格的内容为换行的点，

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #div1{
            width: 500px;
        }
        .table {
            width: 50%;
            max-width: 100%;
            margin-bottom: 20px;
        }
        .turn{
            word-break: break-all;
        }
    </style>
</head>
<body>
<div id="div1">
    <table class="table table-striped">
        <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jacob</td>
            <td class="turn">Thornton hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</td>
            <td>@fat</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
        </tbody>
    </table>
</div>

</body>
</html>

转载于:https://www.cnblogs.com/masita/p/5460777.html

weixin_34184561

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css表格内容过长换行

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .table { width: 100...
复制链接

扫一扫