HTML页面table中文字不以省略号显示

最新推荐文章于 2022-08-29 16:02:16 发布

醉耕

最新推荐文章于 2022-08-29 16:02:16 发布

阅读量1k

点赞数

分类专栏：前端文章标签：省略号 Table

本文链接：https://blog.csdn.net/Q_Sea__/article/details/81180116

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

今天在弄让标签中多余的文字以省略号显示时，遇到一个有意思的问题，道友请看。

代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 

 <style>

     table{
         table-layout: fixed;
         /*这个属性的默认值是：auto，表示表格的宽高会随着内容的改变而改变*/
     }
     .tt1{
        width:150px;
        white-space:nowrap; /*对于长的字符不进行换行*/
        text-overflow:ellipsis;/*过长的字符会以省略号显示*/
        overflow:hidden;/*超过长度的内容会自动隐藏*/
     }  
  </style>
  </head>
    <body>
        <table>
            <tr>
                <td class='tt1'>
                    dsandkjsdsandkjsadddddsankdsajdklsajdlsadsa
                    dsandkjsdsandkjsadddddsankdsajdklsajdlsadsa
                    dsandkjsdsandkjsadddddsankdsajdklsajdlsadsa
                    dsandkjsdsandkjsadddddsankdsajdklsajdlsadsa
                    dsandkjsdsandkjsadddddsankdsajdklsajdlsadsa
                </td>
            </tr>
        </table>

        <div class='tt1'>
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
        </div>

        <hr/>

</body>
</html>