Home > Article > Web Front-end > Display ellipsis effect when html table cell content exceeds
Display ellipsis effect when html table cell content exceeds
- 不言Original
- 2018-06-05 11:56:025112browse
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>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;/*隐藏的字符用省略号表示*/
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>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!