站内搜索:
首页 >> 前端 >> 内容
html表格内容超出时隐藏和换行

时间:2017/6/22 9:33:00

表格内容超出时隐藏:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<style>
    table{
    table-layout:fixed; /*使水平布局不受单元格的内容的影响*/
    }
    td{
        width:50%;
        overflow:hidden;/*文本超出时隐藏*/
        white-space:nowrap;/*规定表格单元格中的内容不换行。*/
    }
</style>
</head>
<body>
    <table border="1px" width="100px">
    <tr><td>333333333333</td><td>333333333333</td></tr>
    <tr><td>123333333</td><td>3333333333334444</td></tr>
    <tr><td>123333333</td><td>33333333333344444</td></tr>
    <tr><td>123333333</td><td>33333333333344444</td></tr>
    </table>
</body>
</html>



注:必须设置table的具体宽度,td的宽度设置使用百分制。不可直接给td设置具体的宽度数值。

表格内容超出时换行:

给td设置word-break:break-all。

  • 上一篇:为控件添加快捷键
  • 下一篇:html基础学习_屏蔽F5和鼠标右键
  • 返回顶部