(如有错敬请指点,以下是我工作中遇到并且解决的问题)
效果图:
重点是把table设置为table-layout: fixed;
超出的文字隐藏的效果才有。
p标签超出的文字隐藏的效果不需要设置这个内容就可以有效果。
<table border="1"> <tbody> <tr><td>1</td><td>fdsfsdafdsafsafdsfsdafdsafsafdsfsdafdsafsajghjgkghfjgfjgfjfgaa</td><td>1</td></tr> <tr><td>1</td><td>1</td><td>1</td></tr> </tbody> </table>
body{ margin: 0; padding: 0; 100%; } table{ border-collapse: collapse; 96%; margin: 0 2%; table-layout: fixed; } tr{ 100%; } tr td{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-wrap: break-word; } tr td:nth-child(1),tr td:nth-child(3){ 20%; } tr td:nth-child(2){ 56%; }