table td中,当td里面填充的为纯数字的时候,使用overflow:hidden无效

it2022-05-05  150

非数字的情况 <div style="width: 600px;"> <table border="1" style="width: 90%;margin: 0 auto;display: inline-block;table-layout:fixed;"> <tr> <th>Month</th> <th>Savings</th> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> <td>January</td> <td > 萨达打多多多多多多多多多多多多但事实上所所所所所所所所所所所所所所但事实上所所所 </td> </tr> <tr> <td>February</td> <td>$80</td> <td>February</td> <td>$80</td> </tr> </table> </div>

纯数字的情况 <div style="width: 600px;"> <table border="1" style="width: 90%;margin: 0 auto;display: inline-block;table-layout:fixed;"> <tr> <th>Month</th> <th>Savings</th> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> <td>January</td> <td > 233333333333333333333333333333333333333333333333333333333333333333333333333333333 </td> </tr> <tr> <td>February</td> <td>$80</td> <td>February</td> <td>$80</td> </tr> </table> </div>

解决方法(在td中嵌套一层div,设置宽度和溢出处理) <div style="width: 600px;"> <table border="1" style="width: 90%;margin: 0 auto;display: inline-block;table-layout:fixed;"> <tr> <th>Month</th> <th>Savings</th> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> <td>January</td> <td > <div style="overflow: hidden;white-space: nowrap; text-overflow: ellipsis;width:90px;">233333333333333333333333333333333333333333333333333333333333333333333333333333333</div> </td> </tr> <tr> <td>February</td> <td>$80</td> <td>February</td> <td>$80</td> </tr> </table> </div>

总结 对为什么数字会产生这样的效果,未知,继续研究,如果你知道的话,请告诉我

最新回复(0)