解释

在前端开发中，如果内容超出部分，往往需要限制单元格宽度，显示省略号。下面简单介绍一下如何达到这个效果。

准备知识

1.控制文本不换行

white-space : nowrap；

2.超过长度时，会出现一个省略号

飞越：隐藏；

文本-overflow :省略号

3.修改表格布局算法

表-布局：固定；表格布局的默认值是自动的，这意味着列宽是由单元格内容设置的。而固定是指列宽由表宽和列宽设置。

也就是说，当您为表格设置列宽时，实际情况是不起作用的。当单元格中的内容太多时，宽度仍然会变宽。如果需要根据为单元格定义的列宽来确定表格的列宽，则必须使用固定的值。

注：1。必须设置表格的宽度。2.如果只设置表格宽度，不设置列宽，列宽会均匀分布。

代码演示

如下代码所示，表中排列了姓名、年龄、性别和地址四列，这四列的长度分别为10%、20%、30%和40%。

XML/HTMl代码将内容复制到剪贴板

！doctypehtml

htmllang='en '

头

metharset=' UTF-8 '/

标题表演示/标题

styletype='text/css '

表格{

宽度：；

表-布局：固定；

}。名称{

宽度：10%；

}。年龄{

宽度：20%；

}。性{

宽度：30%；

}。addr{

宽度：40%；

}

/style

/head

身体

table border=' 1 ' cell spacing=' 0 ' cell padding=' 0 '

四羟乙基己二酰胺

tr

Thclass='name' name /th

Thclass='age '年龄/th

Thclass='sex '性别/th

Thclass='addr '地址/th

/tr

/thead

在需要分行下载处加上

tr

Td Li si /td

td13/td

Td男/td

Td山东/td

/tr

tr

Td Li si /td

td13/td

Td男/td

Td山东/td

/tr

tr

Td Li si /td

td13/td

Td男/td

Td山东/td

/tr

/tbody

/table

/body

/html

本文转载自中文网站