其他分享
首页 > 其他分享> > table单元格最大宽度和列数的设置,并且超出部分末尾显示省略号

table单元格最大宽度和列数的设置,并且超出部分末尾显示省略号

作者:互联网

要实现table单元格最大宽度和列数的设置,并且超出部分末尾显示省略号,在网上找了好久终于解决。

参考 :

https://blog.csdn.net/qq_27064559/article/details/81739463

https://bbs.csdn.net/topics/30118907

以下是实现。


<html>
<head>
    <style>
        .ell1 { /*单行省略*/
            width: 100px;
            height: 100px;
            overflow: hidden; /*超过区域就隐藏*/
            white-space: nowrap; /*规定段落中的文本不进行换行*/
            text-overflow: ellipsis; /*显示省略符号来代表被修剪的文本。*/
        }

        .ell2 { /*多行省略*/
            max-width: 95px;
            max-height: 50px;
            overflow: hidden; /*超过区域就隐藏*/
            /*display: -webkit-box;*/ /*-webkit- 是浏览器前缀,兼容旧版浏览器的 即为display: box;*/
            -webkit-line-clamp: 2; /*限制在一个块元素显示的文本的行数*/
            -webkit-box-orient: vertical; /*box-orient 属性规定框的子元素应该被水平或垂直排列。horizontal:水平,vertical:垂直*/
            word-break: break-all; /*word-break 属性规定自动换行的处理方法 ,break-all:允许在单词内换行。*/
        }
    </style>
    <script>
        function gettextareavalue1() {
            var strhtml = "<font color=\"red\">1</font>2"
            document.getElementById("textarea").outerHTML = strhtml
        }
        function gettextareavalue2() {
            //var strhtml = "<font color=\"red\">1</font>2"
            var strhtml = "aaa";

            document.getElementById("textarea").outerHTML = strhtml
        }
    </script>
</head>
<body>
    <table border=1 >
        <tr>
            <td class="ell2" onclick="alert(this.textarea)"><font color="red">11</font>2</td>
            <td class="ell2" onclick="textarea.outerHTML=" 12"><font color="#FF0000">11111111111111111111111111111111111111111111111111111111111111111111111</font>2</td>
        </tr>
        <tr>
            <td class="ell2" onclick="gettextareavalue1()">000000000<font color="#FF0000">10</font>000000002000000000300000000040000000005</td>
            <td class="ell2" onclick="gettextareavalue2()">22</td>
        </tr>
    </table>

<textarea id="textarea" rows="3" cols="20" >
w3school
</textarea>

</body>
</html>

标签:box,省略号,单元格,var,break,strhtml,列数,webkit,overflow
来源: https://blog.csdn.net/wxmwzz/article/details/90743794