analyze
Single-line/multi-line display involves table-layout: fixed;this property. The property value in the default state is auto(automatic table layout). The difference between the two different property values is as follows:
method
The method I use when setting the table content for single-line/multi-line display:
The style added by table
table {
table-layout: fixed; /*后续设置单行、多行显示的基础*/
word-break: break-all; /*保证纯字母数字也能完全展示*/
}
The effect of this setting:
- When td does not set the width, all columns share the width equally;
- All numbered and textual content can be fully displayed;
single line display style
Set the class name of singleLine for td
.singleLine {
overflow: hidden;
white-space: nowrap; /*文本不换行*/
text-overflow: ellipsis; /*文本溢出时显示省略号*/
}
multiline display style
Set the class name of multiLine for td
.multiLine {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /*设置显示的行数*/
-webkit-box-orient: vertical;
word-break: break-all; /*使连续的字母或数字能够在换行时拆分*/
}
Effect
The overall effect of this setting is:
-
Tables with no width set for each column before
● Each column equally divides the width of the entire table;
● All content is displayed by default (wrapping lines but not overflowing);
● The table width will not be stretched; -
Tables with previously set widths for each column
● The width of each column prevails, and the column will not be stretched if the content exceeds the content;
● All content will be displayed by default (wrapping lines but not overflowing);
● The width of the table will not be stretched;
defect
When testing, I found that this method has several disadvantages:
- When multiple adjacent tds are set with css styles for displaying content in multiple lines, there will be problems with the layout of the table, which is caused by display: -webkit-box; This property changes the overall layout style.
- When the table has a padding value, the single-line display is normal, but there will be problems with the multi-line display
PS: The problems I encountered when setting up single/multi-line display of table content are all recorded in my other articles. If any teacher encounters similar problems, you can refer to:
- Table content single/multi-line display (2) - When the table has padding, the multi-line ellipsis display does not take effect
- Table content single/multi-line display (3) - how to set when antd table has padding value
test code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
table td:nth-child(2) {
/* display:none; */
}
table.default {
table-layout: auto; /*默认值就是auto*/
}
table.fixed {
table-layout: fixed; /*后续设置单行、多行显示的基础*/
}
/* 方案测试 */
.test {
table-layout: fixed; /*后续设置单行、多行显示的基础*/
word-break: break-all; /*保证纯字母数字也能完全展示*/
}
.singleLine {
overflow: hidden;
white-space: nowrap; /*文本不换行*/
text-overflow: ellipsis; /*文本溢出时显示省略号*/
}
.multiLine {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /*设置行数*/
-webkit-box-orient: vertical;
word-break: break-all; /*使连续的字母或数字能够在换行时拆分*/
}
</style>
</head>
<body>
<p style="color: red;">table1: table-layout:auto默认状态，每列设置宽度；内容超出宽度会被撑开；</p>
<table class="default" border="1" width="100%">
<tr>
<td width="20%">第一列设置宽度为20%</td>
<td width="80%"></td>
</tr>
<tr>
<td width="20%">10000000000000000000000</td>
<td width="80%">数字测试</td>
</tr>
<tr>
<td width="20%">fjdksljaiwuefwajkjkjjkjljkjlkjljpoif</td>
<td width="80%">字母测试</td>
</tr>
</table>
<br />
<p style="color: red;">table2: table-layout: fixed；设置宽度，内容超过宽度不会被撑开</p>
<table class="fixed" border="1" width="100%">
<tr>
<td width="20%">第一列设置宽度为20%</td>
<td width="40%"></td>
<td width="40%"></td>
</tr>
<tr>
<td width="20%">So , I want to show a paragraph from database into a table cell.</td>
<td width="40%">英文句子，td设置width，不加任何类</td>
<td width="40%" rowspan="2">如果每列宽度固定，中英文句子不用加任何其他css就可以全部显示</td>
</tr>
<tr>
<td width="20%">我是一大长串中文测试内容</td>
<td width="40%">中文句子，td设置width，不加任何类</td>
<td width="40%"></td>
</tr>
<tr>
<td width="20%" class="multiLine">So , I want to show a paragraph from database into a table cell.</td>
<td width="40%">为td设置width=“20%”，multiLine类名</td>
<td width="40%">width的百分比不是整个table的</td>
</tr>
<tr>
<td class="singleLine">So , I want to show a paragraph from database into a table cell.</td>
<td width="40%">英文句子，singleLine类名，td不设width</td>
<td width="40%" rowspan="2">中英文句子省略的情况下，不能为td设置宽度</td>
</tr>
<tr>
<td class="multiLine">So , I want to show a paragraph from database into a table cell.</td>
<td width="40%">英文句子，multiLine类名，td不设width</td>
<td width="40%">100</td>
</tr>
<tr>
<td width="20%">2903929484728907</td>
<td width="40%">数字，不加类名</td>
<td width="40%">会溢出</td>
</tr>
<tr>
<td class="singleLine">2903929484728907</td>
<td width="40%">数字，singleLine类名，td有width</td>
<td width="40%" rowspan="2">纯数字，单行有无width都不影响，多行必须不设置width</td>
</tr>
<tr>
<td class="multiLine">29039292829384903278675328642736497987484728907</td>
<td width="40%">数字，multiLine类名</td>
<td width="40%"></td>
</tr>
<tr>
<td width="20%">EKAFDFDF0dfdfi30</td>
<td width="40%">字母，不加类名</td>
<td width="40%">会溢出</td>
</tr>
<tr>
<td width="20%" class="singleLine">Iwanttoshowaparagraphfromdatabaseintoatablecell.</td>
<td width="40%">字母，singleLine类名，td不设width</td>
<td width="40%" rowspan="2">字母，情况同数字</td>
</tr>
<tr>
<td class="multiLine">Iwanttoshowaparagraphfromdatabaseintoatablecell.</td>
<td width="40%">字母，multiLine类名，td不设width</td>
<td width="40%"></td>
</tr>
</table>
<br />
<p style="color: red;">table3:table-layout: auto; 默认状态，不设置宽度，整个表格会被横向撑开</p>
<table class="default" border="1" width="100%">
<tr>
<td>So , I want to show a paragraph from database into a table cell.</td>
<td>10000000</td>
<td>100</td>
</tr>
<tr>
<td>1000000000000000000000000000000000000000000000000000</td>
<td>1000000000000000000000000000000000000000000000000000</td>
<td>1000000000000000000000000000000000000000000000000000</td>
</tr>
</table>
<br />
<p style="color: red;">table4:table-layout: fixed; 每列不设置宽度，纯字母数字的内容（如编号）会溢出</p>
<table class="fixed" border="1" width="100%">
<tr>
<td>So , I want to show a paragraph from database into a table cell.</td>
<td>10000000</td>
<td>100</td>
</tr>
<tr>
<td>1000000000000000000000000000000000000000000000000000</td>
<td>1000000000000000000000000000000000000000000000000000</td>
<td>1000000000000000000000000000000000000000000000000000</td>
</tr>
</table>
<br />
<p style="color: red;">table5:table-layout: fixed; 每列不设置宽度，纯字母数字的内容（如编号）会溢出</p>
<table class="test" border="1" width="100%">
<tr>
<td>So , I want to show a paragraph from database into a table cell.</td>
<td>10000000</td>
<td>100</td>
</tr>
<tr>
<td class="multiLine">1000000000000000000000000000000000000000000000000000</td>
<td>数字</td>
<td>100</td>
</tr>
<tr>
<td>fjkdsjfklsurieuwprudfslkjflsuepurwpirepwxnvzslkfjwuefiwejfl</td>
<td>字母</td>
<td>100</td>
</tr>
</table>
</body>
</html>