Display ellipsis effect when html table cell content exceeds-HTML Tutorial-php.cn

Display ellipsis effect when html table cell content exceeds

不言

Release： 2018-06-05 11:56:02

Original

5051 people have browsed it

The following is an article about displaying the ellipsis effect (implementation code) when the table cell content exceeds the limit. It’s pretty good. Now I share it with you and give it as a reference. Let’s take a look together

Explanation

In front-end development, we often encounter situations where we need to limit the width of cells and display ellipsis in the excess content. Here is a brief introduction on how to achieve this effect.

Preparation knowledge

1. Control text not to wrap

white-space: nowrap;

2. When the length is exceeded, an ellipsis appears

overflow:hidden;

text-overflow:ellipsis

3. Modify the table layout algorithm

table-layout:fixed;The default value of table-layout is automatic, which means that the column width is set by the cell content. Fixed means that the column width is set by the table width and column width.

That is to say, when you set the column width for the table, the actual situation does not work. When there is too much cell content, the width will still be stretched. If you need the column width display mode of the table to be determined by the column width you define for the cell, you must use the fixed value.

Note: 1. The width of the table must be set. 2. If you only set the table width and not the column width, the column widths will be evenly distributed.

Code Demonstration

As shown in the following code, four columns of name, age, gender and address are arranged in the table. The lengths are 10%, 20%, 30%, and 40% respectively.

XML/HTML CodeCopy the content to the clipboard

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>表格演示</title>
    <style type="text/css">
        table{   
            width: 100%;   
            table-layout: fixed;   
        }   
        .name{   
            width: 10%;   
        }   
        .age{   
            width: 20%;   
        }   
        .sex{   
            width: 30%;   
        }   
        .addr{   
            width: 40%;   
        }   

    </style>
</head>
<body>
    <table border="1" cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <th class="name">姓名</th>
                <th class="age">年龄</th>
                <th class="sex">性别</th>
                <th class="addr">地址</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>李四</td>
                <td>13</td>
                <td>男</td>
                <td>山东</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>13</td>
                <td>男</td>
                <td>山东</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>13</td>
                <td>男</td>
                <td>山东</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Copy after login

The display effect is as follows:

It is easy to see that the lengths of the name, age, gender, and address columns are 10%, 20%, 30%, and 40% respectively.

If you increase the content of the first name, the effect will be unbearable (＞﹏＜)!

I can’t bear to look at it (＞﹏＜)! !

# How to display the excess content of a single line as ellipses? You only need to set the following attributes of the cell:

XML/HTML CodeCopy the content to the clipboard

white-space: nowrap;/*控制单行显示*/   
overflow: hidden;/*超出隐藏*/   
text-overflow: ellipsis;/*隐藏的字符用省略号表示*/

Copy after login

Without further ado, here’s the code !

XML/HTML CodeCopy the content to the clipboard

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>表格演示</title>
    <style type="text/css">
        table{   
            width: 100%;   
            table-layout: fixed;   
        }   
        .name{   
            width: 10%;   
        }   
        .age{   
            width: 20%;   
        }   
        .sex{   
            width: 30%;   
        }   
        .addr{   
            width: 40%;   
        }   
        td{   
            white-space: nowrap;/*控制单行显示*/   
            overflow: hidden;/*超出隐藏*/   
            text-overflow: ellipsis;/*隐藏的字符用省略号表示*/   
        }   
    </style>
</head>
<body>
    <table border="1" cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <th class="name">姓名</th>
                <th class="age">年龄</th>
                <th class="sex">性别</th>
                <th class="addr">地址</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="name2">李四sssssssssssssssssssssssssssssssssss</td>
                <td>13</td>
                <td>男</td>
                <td>山东</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>13</td>
                <td>男</td>
                <td>山东</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>13</td>
                <td>男</td>
                <td>山东</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Copy after login

After modification, the effect is as follows:

Related recommendations:

How to use multiple examples to parse HTML forms

The above is the detailed content of Display ellipsis effect when html table cell content exceeds. For more information, please follow other related articles on the PHP Chinese website!